先抛个例子出来

运行下面的例子后，可以看到输出内容如下。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            background-color: red;

            font-size: 50px;

        }

        p{

            float: left;

            background-color: yellow;

            margin: 50px;

        }

    </style>

</head>

<body>

    <span>

        <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p>

    </span>

    <div>123</div>

</body>

</html>

可以看到p元素浮动后，把后面的div给分离了，div的背景由于看不到浮动元素，所以左上角去了，而div的内容123由于能够看到浮动元素，所以被放到浮动元素后一行显示。也就是说由于浮动流的存在导致div如法包裹“”123“”这几个文字。

为了使div的块和内容统一，那肯定得消除浮动，消除浮动的方法，请看上一篇文章。

下面再看一个奇怪的现象。代码及效果如下。原因我还在探究中，有了解的可以先留言。

而且随着窗口减小，内容123显示的越来越少。

CSS Float浮动所带来的奇怪现象的更多相关文章

  1. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  2. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  3. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  4. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  5. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  6. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  7. css float 浮动

    CSS Float(浮动) 什么是 CSS Float(浮动)?大理石平台价格 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像, ...

  8. CSS：CSS Float(浮动)

    ylbtech-CSS:CSS Float(浮动) 1.返回顶部 1. CSS Float(浮动) 什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围 ...

  9. DIV CSS float浮动

    一.浮动? #CSS样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>.<a>.等html标签)的浮动布局. #通过定义浮动(floa ...

随机推荐

  1. Linux的fuser命令解析

    fuser命令是用来显示所有正在使用着指定的file, file system 或者 sockets的进程信息. 例一: #fuser –m –u /mnt/usb1 /mnt/usb1: 1347c ...

  2. js canvas画柱状图 没什么高端的 就是一篇偶尔思路的

    公司项目要用js画柱状图,本来想用个插件吧 chart.js 忽然一想 我们也用不了那么大的插件.自己写个吧,也能看看自己那点数学水平能够不! 有几个小亮点吧 1.函数x 和 函数y 对坐标进行了转化 ...

  3. 【BIEE】14_开发流程介绍

    以上是BIEE开发的流程图,通过流程图我们可以看出在BIEE中存在以下主要内容: 仪表盘 仪表盘页 分析 仪表盘提示 主题区域 Catalog RPD 以下是一些文件以及资料库存储路径 资料库存储路径 ...

  4. java的IO操作：字节流与字符流操作

    流的概念 程序中的输入输出都是以流形式,流中保存的实际上都是字节文件. 字节流与字符流 字节流的操作: 1)输入:inputStream, 2)输出:outPutStream; 字符流的操作: 1)输 ...

  5. （四）EasyUI 使用——form表单2 & window窗口

    form表单组件主要有以下内容(如下图)      6. progressbar进度条  每隔1秒让进度条按随机数填充,直至充满进度条刻度(只能执行一次) 进度条: <div id=" ...

  6. linux文本命令

    1.find和grep find命令的作用是在目录中根据文件名搜索文件,grep命令的作用是在目录中根据文件内容搜索文件,find和grep的使用权限是所有用户. (1)find命令: find 列出 ...

  7. ImageBox Control with Zoom/Pan Capability

    Download source files - 10.8 Kb Download demo project - 6.81 Kb Introduction This control extends th ...

  8. Java 8 日期时间API使用介绍

    如何正确处理时间 现实生活的世界里,时间是不断向前的,如果向前追溯时间的起点,可能是宇宙出生时,又或是是宇宙出现之前, 但肯定是我们目前无法找到的,我们不知道现在距离时间原点的精确距离.所以我们要表示 ...

  9. Java synchronized详解（java 线程同步）

    http://www.cnblogs.com/devinzhang/archive/2011/12/14/2287675.html

  10. 如何理解HTTP协议的“无连接，无状态”特点

    是一个属于应用层的面向对象的协议,HTTP 协议一共有五大特点:1.支持客户/服务器模式;2.简单快速;3.灵活;4.无连接;5.无状态. 无连接 无连接的含义是限制每次连接只处理一个请求.服务器处理 ...