css清除浮动

前言

之因此要清除浮动，就是解决浮动元素形成的一些问题，如包含块高度塌陷，浮动流形成的布局混乱等问题。

clear清除

值: left | right | both | none | inherit
初始值: none
应用于: 块级元素(块级元素指block元素，不包括inline-block元素)
继承性: 无

left:左侧不容许存在浮动元素
right:右侧不容许存在浮动元素
both:左右两侧不容许存在浮动元素
none:容许左右两侧存在浮动元素

[注意]设置clear属性的元素并不能改变浮动元素，而只能改变自身

CSS2.1引入了一个清除区域，清除区域是在元素上外边距之上增长的额外间隔，不容许任何浮动元素进入这个范围，这意味着元素设置clear属性时，它的外边距不改变

效果展现：

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

【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伪元素

【BFC】
触发条件：

[1]float: left/right

[2]position:absolute/fixed

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

[4]overflow:hidden/scroll/auto

【IE7-】
关于IE7-浏览器有一个其特有的属性haslayout，当触发包含块的haslayout时，浮动元素被layout元素自动包含
触发条件：

[1]display:inline-block

[2]height/width:除auto外

[3]float: left/right

[4]position: absolute

[5]writing-mode: tb-rl

[6]zoom: 除normal外

兼容写法

【版本1】

.clear:after{content:""; display: block; clear: both;}
.clear{zoom: 1;} // IE六、7兼容

【版本2】

.clearfix:before,.clear:after{content:"";display:table;} // 由于display: table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会造成Block Formatting Context。
.cleafixr:after{clear:both;}
.clearfix{zoom:1} // IE六、7兼容

效果展现：