1、理解clear:left/right的含义
clear语法：
clear：none | left | right | both
取值：
none：默认值。允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边 有浮动对象
both：不允许有浮动对象。
w3.org官方的解释是：「元素盒子的边不能和前面的浮动元素相邻」。
务必记住这句话：“float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！”
<div class="fz"> <div class="fix"> /*该fix可以不引用，因为img是左浮动，cll已经清除了左浮动。但如果img是右浮动，父div同样塌陷*/ <img src="images/xxx.jpg" width="125" class="l pr10"> <div class="cll">我不喜欢你，我不要和你在一起~</div> </div> </div>
这样，解释了垂直环绕布局，第一个div左浮动，第二个div先左浮动，后清除左浮动，第三个div不浮动。
其中第二个div先左浮动对第三个div产生影响，再清除左浮动是自己左边抗浮动（即左边不能有浮动）
2、为什么要清除浮动？
a、防止父元素高度塌陷
当一个父元素的高度不写或者为auto的时候，里面含有浮动子元素，那么该父元素的高度将不会自动适应子元素的高度，当子元素全部为浮动元素则父元素的高度为0；当子元素有未浮动元素，则父元素的高度为该未浮动元素的高度。
b、塌陷影响其（父元素）相邻元素的布局
代码：
<div class="fz"> <div style=" 300px; border: 3px solid #ff4136;"> <div class="l" style=" 100px; height: 100px; border: 1px solid #ccc;">左浮动</div> <div class="r" style=" 100px; height: 100px; border: 1px solid #ccc;">右浮动</div> </div> <div>父元素相邻元素</div> </div>
（父元素的高度为0，并使得父元素相邻元素跑上面去了。）
清除浮动后：
3、清除浮动的方法：
方法一：在浮动元素末尾添加一个空的标签
<div style="clear:both"></div> <br clear="all" />
缺点：添加无意义的空标签，有违结构的表现和分离。不推荐使用
方法二：父元素添加"ovh"或者"ova"
.ovh { overflow: hidden; } .ova { overflow: auto; }
在IE6/7中还需要触发hasLayout，例如*zoom:1 ? 不需要，因为overflow:hidden跟auto已经触发了ie6/7的haslayout，此外父元素设置了width宽度也已经触发了haslayout，详见 《BFC和haslyout（IE6-7）》
缺点：ovh内容增多时候容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素；？很多js特效做不了，多出去部分被隐藏了？
ova子元素宽度改变时导致父元素出现滚动条。
方法三：父元素也设置浮动
缺点：使得父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用
方法四：父元素设置display:table
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用。
方法五：使用after伪元素，推荐使用
.fix { *zoom: 1; } //由于IE6-7不支持:after使用*zoom:1触发haslayout .fix:after { display: table; content: ''; clear: both; }
综上所述，清除浮动的两种思路大体是：
a、清除浮动：利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
b、闭合浮动：触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素。
推荐使用方法五，当确定不需考虑溢出问题的时候可以考虑父元素添加”ovh“，以及父元素使用"display: inline-block;"都是触发父容器形成BFC的原理。