1.Float的設(shè)計初衷僅僅是：
實現(xiàn)文字環(huán)繞效果，如下圖所示：
Paste_Image.png
明白了float的設(shè)計初衷崩溪，就可以明白float特有的行為表現(xiàn)了伶唯。
我們都知道惧盹，使用float會產(chǎn)生一定的破壞性，如給子元素設(shè)置浮動會使父元素高度塌陷粹断，其實這不是bug姿染，而是為了實現(xiàn)文字環(huán)繞效果而產(chǎn)生的特性使然。
2.清除浮動的兩大基本方法：
1.給受浮動影響的元素設(shè)置clear:both
2.使父元素形成BFC（IE8+狡汉，是高級瀏覽器特有的一個概念）或haslayout（IE6/IE7私有的概念）
兩種方法的區(qū)別：
- clear：與外界還有聯(lián)系盾戴，例如會產(chǎn)生margin重疊的效果
- BFC/haslayout（應(yīng)用于父元素）:封閉兵多，里面的聲明不會對外界產(chǎn)生影響，例如float不會出現(xiàn)margin重疊衅斩，但也有缺陷怠褐，無法應(yīng)用于所有瀏覽器
代碼示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>clear與margin重疊</title>
</head>
<body>
1.
<div style="background-color: #f5f5f5;">
<div style="clear:both; margin-bottom:100px;">clear:both;</div>
</div>
<div style="margin-top: 100px;">本文字離圖片的距離是？</div>
<br><br><br><br>2.
<div style="background-color: #f5f5f5; overflow: hidden;">
</div>
<div style="margin-top: 100px;">本文字離圖片的距離是奠涌？</div>
</body>
</html>
顯示效果：
Paste_Image.png
第一種：浮動元素的底加入div 且設(shè)置clear:both;（本例中margin-top和margin-bottom會發(fā)生重疊）
第二種：在浮動元素的父元素上加入overflow: hidden溜畅，使父元素形成BFC;（本列中 父元素會將整個元素包裹起來慈格，從而不會出現(xiàn)塌陷和重疊顯現(xiàn)）
clear的通常應(yīng)用形式：
- HTML層面，通常是在塌陷的父容器底部插入具有
clear:both聲明的block水平元素峦椰，通常使用<div></div>元素汤功。
方法的不足：添加了多余的裸露的
<div></div>標(biāo)簽
- CSS層面溜哮，使用after在父元素底部生成一個具有
clear:both聲明的偽元素：.clerafix:after{}。
方法的不足：對IE6/IE7無效茂嗓。
權(quán)衡后的策略:
IE8以上的瀏覽器使用:
.clearfix:after{content:'';display:table;clear:both;}
IE6/IE7使用
.clearfix{*zoom:1;}
注意：切勿濫用
.clearfix述吸，它只應(yīng)該應(yīng)用于包含浮動子元素的父級元素上锣笨。
