为啥要清除浮动呢？

前言

小伙伴们好，我是岚之炑（mu)。在这个春暖花开的季节里，我们又开心的学习了。今天我们一起学习为啥要清楚除浮动。

什么是浮动？

CSS的定位机制有3种：普通流（标准流）、浮动和定位。
html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
浮动则是元素与元素之间处于不同层级，导致元素发生重叠的情况。定位是元素与元素之间可以处于多个不同的层级，导致元素之间存在特定的关系。

在CSS中，通过float属性来定义浮动，其基本语法如下：

选择器{
float: 属性值;
}
/*
float的可选值为：
left   元素向左浮动
right  元素向右浮动
none  元素不浮动（默认值)
*/

为什么要清楚浮动？

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为 0 的问题。

清除浮动的方法（重点）

1、额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。

2、父级添加 overflow 属性方法

可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
可以先定义一个类名，然后把定义好的类名赋给浮动元素的父级元素。 
语法：
.clear{
	overflow:hidden;
}

优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3、使用after伪元素清除浮动

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

优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 IE6-7 的特有属性 hasLayout

4、使用before和after双伪元素清除浮动

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

优点： 代码更简洁
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 IE6-7 的特有属性 hasLayout。

总结

通过对清除浮动的方法的整理，可以快速的解决布局浮动问题。我是岚之炑（mu），喜欢这篇文章，请点个赞。