清除浮动的方法

清除浮动

当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面。出现这种情况，我们需要清除浮动
清除浮动不是不浮动，是清除浮动产生的不利影响

清除浮动的方法

• 给浮动元素的父元素设置高度

• 额外标签法

  给最后一个浮动元素后边添加额外标签，使用clear:both; 不推荐使用，会产生冗余代码。

• 给浮动元素的父元素使用overflow:hidden; 触发bfc,

  如果有子元素，出了父元素的范围，多出的部分会隐藏掉。

• 后伪元素清除浮动
  给浮动元素的父元素使用clearfix

.clearfix:after {
content:”.”;
display:block;
height: 0;
line-height: 0;
visibility:hidden;
clear:both;
}
.clearfix {
*Zoom: 1;
}

• 双伪元素清除浮动
  给浮动元素的父元素使用双伪元素清除浮动

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