清浮动

本文转载于:猿2048网站清浮动

方法

　　对于标准浏览器来讲，清浮动其实就两种方法，一种是在浮动元素下面添加新元素设置clear属性；另外一种是触发包含块的BFC，使其包含浮动元素。而对于IE7-浏览器，则用到其特有属性haslayout

【1】clear属性

　　[1]<div style="clear:both"></div>

　　<注意>并非很适用，若包含块为<ul>，则子元素只能为<li>，则在<li>后面添加<div>元素不合适

　　[2]<br style="clear:both">

　　<注意>虽然clear属性只应用于块级元素，但在除IE7-之外的其余浏览器均可以将clear属性应用于<br>元素

　　[3]为浮动元素的after伪元素设置clear属性（推荐）

　　.clear:after{content:""; display: block; clear: both;}

　　<注意>IE7-浏览器不支持after伪元素

【2】BFC

　　[1]float: left/right

　　[2]position:absolute/fixed

　　[3]display:inline-block/table-cell/table-caption/flex

　　[4]overflow:hidden/scroll/auto