时间：2021-07-01 10:21:17 帮助过：24人阅读
先说说什么是文档流 流是什么 就是一串连续的东西
第一个框第二个框第三个框我换行 我不换行
我们写在html里面的元素 系统会放在数据流里依次读取 按照从左到右从上到下的顺序 放置在页面上
当然在放置的过程中 牵扯到行内元素与块级元素的概念
简单说明一下
块级元素: 如div 每一个div元素占据一行 如果没有设置宽度 就默认放满整行 如果指定了宽度 即使宽度再小 后面的元素也得另起一行放置
行内元素:如span不会换行 举个例子如A是行内元素 后面的元素就放在A的右边而不是下边
说完了文档流 再说说浮动
在上面的例子里 三个div都是块级元素 一个占一行 可问题是 我就想让他们的布局如下 怎么办
先看代码
我换行 我不换行
它的意思就是说让这个元素脱离文档流的限制 把他"浮动"到包裹他的容器的最左边 (此时在文档流里就没有它的存在了)
现在在看 那三个div的宽度参数 深红色的宽度是80 我们只看到了右边的40 左边的40个像素被在文档流之外的粉红色div挡住了
这个图的代码如下
ddLLLasdfdddddeeee
如果大家用的是chrome的浏览器打开审查元素会看到
其实蓝色的111div是从顶行放置的 粉红色的div放在它上面 挡住了一部分
(lll asdf 居中打印了 同一段代码在editplus与chrome显示不一样 应该是解释的机制不同吧)
这也符合上面我们说的文档流的理论: 哪个元素有了float属性 就把他取出文档流 而文档流内部的元素就放置在自己应该在的位置上
可问题是我想让asdf也顶行写不行吗?
这就牵扯到float的详细布局方式了 告诉大家一句话
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前，远离页面边缘的一端是后。
那有另一个问题了,如果a本身不是浮动的呢? 钻牛角尖了吧,如果a不是浮动的,那它就还在文档流里面呗!就是下面这个图的大红色块说明的道理
如果还是不明白,自己敲几行代码,看看效果就ok
分析咱们的页面LLL的前面元素有浮动标签 就把LLL放在前边元素的右边
asdf的上一个元素是LLL 所以asdf就放在LLL的正下方 也就是我们图中的效果
那怎么办?
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
clear本身就是清除元素本身的浮动效果的
我们在asdf上加上clear:left就ok了
(下面这个文章 写的远比我的好 我的资料也基本来自这里 大家一定看看)
http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html#undefined