为什么清除浮动

1、浮动要点

• 不会超过父元素内边距

• 一个浮动，同级元素也要浮动，才能一行显示
• 浮动元素具有行内块特性

2、为什么清除浮动

子元素的浮动后，父元素内部高度为0

清除方式

• 加个标签 写上属性clear: left | right | both 【不用】

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

• 父级添加overflow
  内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
• after

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

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

• before和after

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以出发*/
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

BFC拓展