CSS清除浮动笔记

清除浮动的方式：

1、额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style="clear:both"></div>，或者其他标签
（如<br />等）。
 优点： 通俗易懂，书写方便
 缺点： 添加许多无意义的标签，结构化较差
注意： 要求这个新的空标签必须是块级元素。 实际工作可能会遇到,但是不常用。

2、可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。注意是给父元素添加代码
 优点：代码简洁
 缺点：无法显示溢出的部分

3、:after 方式是额外标签法的升级版。也是给父元素添加

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

优点：没有增加标签，结构更简单
 缺点：照顾低版本浏览器
 代表网站： 百度、淘宝网、网易等
4、 双伪元素清除浮动

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

优点：代码更简洁
 缺点：照顾低版本浏览器
 代表网站：小米、腾讯等

详情请看pink老师视频