浮动带来的影响以及解决方案

什么是浮动

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素

浮动带来的影响

浮动会脱离标准流影响其他盒子的显示

默认三个设置了宽高的三个<div>元素，本来会一个<div>独占一行

如果a设置了向左浮动，他会脱离标准流，盖住原先的b

如果a设置了向右浮动，他会脱离标准流，忽略b和c，b和c会向上移动直到碰到盒子的顶部，a会向右动直到碰到容器的右边，且a和b会显示在同一行

若父元素不设置高，元素浮动之后，无法撑开其父元素，产生塌陷

设置两个box盒子为box1和box2，box1没有高度里面有三个盒子分别为a,b,c。每个小盒子有高度且独占一行撑开box1。box2有高度在box1下方。

给a，b，c添加浮动过后，box1高度消失，a、b、c漂浮脱离标准流，box2向上直到盒子顶端

解决方法：

清除浮动的策略是: 闭合浮动(只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子)

1.额外标签法：在浮动元素末尾添加一个空的标签，必须是块级元素，也称为隔墙法

<div style=”clear:both”></div>

2.父级添加 overflow 属性：给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll

3.父级添加after伪元素

.clearfix:after {
 	content: ""; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
}
 .clearfix { 
	*zoom: 1;
 } 

4.父级添加双伪元素

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