CSS清除浮动的方法

---

清除浮动的方法

清除浮动的本质是什么？

1. 清除浮动的本质是清除浮动元素造成的影响

2. 如果父盒子本身有高度，则不需要清除浮动

3. 清除浮动之后，夫级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

清除浮动的方法：

1. 额外标签法（隔墙法）——给谁清除浮动，就在其后额外添加一个空白标签 。
   优点：通俗易懂，书写方便。（不推荐使用）
   缺点：添加许多无意义的标签，结构化比较差。
   给box盒子清除浮动

.clear  {
		clear：both;
		}

<div class="box"></div>
<div class="clear"></div>

2. 父级添加overflow方法
   优点：代码简洁（慎重使用，若该父盒子里还有position定位会引起麻烦）
   缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

.father {
			overflow:hidden;
			}
.child {
		float:left;
		}
<div class="father">
					<div class="child"></div>
</div>

3. 使用after伪元素清除浮动：：after方式为空元素的升级版，好处是不用单独加标签了。（较常用）
   优点：符合闭合浮动思想，结构语义化正确，没有添加标签
   缺点：由于IE6-7不支持：after，使用zoom：1，触发hasLayout。

.clearfix:after {
				content : " ";
				display : block;
				height : 0;
				clear : both;
				visibility : hidden;
				}
	.clearfix {  /*  IE6，7 专用 */
				*zoom : 1;
		    	}

4. 使用before和after双伪元素清除浮动：（较常用）
   优点：代码简洁
   缺点：照顾低版本浏览器

.clearfix:before , .clearfix:after {
	content : " ";
	display : table;
}
	.clearfix : after {
	  clear : both;
}
	.clear fix {
	  *zoom : 1;
}