CSS 浮动和清除浮动方法总结

作者:WangMin
格言:努力做好自己喜欢的每一件事

什么是浮动 float？

标准流：元素会各占整行位置。子元素如果是标准流，父元素即使没有设置高度，也会撑开父盒子高度，也就是说父元素的高度会随着子元素的高度改变。

浮动：子元素浮了起来，脱离了文档流，所以不会占据原来的位置，若父元素没有设置高度，则子元素不会撑开父元素，也就是说父元素的高度不会随着子元素的高度改变，此时父元素的高度为0。
注意：
浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开。

div配合float浮动来做页面的布局，浮动最常用的地方就是用来做布局。

浮动的特点：

• 浮动的元素可以向左向右移动，直到它的外边框碰到父元素的外边框或另一个浮动框的边框为止。

• 由于浮动的元素不在文档的普通流中，所以文档的普通流中的元素表现的就像浮动框不存在一样。换一种说法就是，当一个元素浮动了之后，原来所处的位置就空了出来，它之后的元素会移动到这个位置，此时后面元素就被浮动元素遮住了，像是在网页中消失了一样。

• 不会独占一行，可以与其他元素共用一行。

• 不会margin合并，也不会margin塌陷，可以设置四个方向的margin与padding。

• 不会出现行内块的空白问题。

浮动float的三种取值：

   float:left      //向左浮动
   float:right    //向右浮动
   float:none    //默认值不浮动

为什么要清除浮动？

清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。也就是说一个盒子里使用了CSS float浮动属性，导致父级不能被子元素撑开，这时候就需要清除浮动，才能让元素内容正常显示。

<div class="box">
   	<div class="one"></div>
   	<div class="one"></div>
</div>

.box{
   border:1px solid #ccc;
}
.box>.one{
   width:200px;
   height:200px;
   background:#000;
   float: left;
   margin-right: 10px;
}

浮动产生样式效果截图：

本来两个黑色盒子是在灰色盒子内，因为对两个黑色盒子使用了float浮动，所以两个黑色盒子产生了浮动，导致灰色盒子不能撑开，这样浮动就产生了。

浮动产生的影响

1、背景不能显示

由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin 与 padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

清除浮动的方法

1、额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 。给空白标签自定义一个清除浮动的类，如下：

 .clear{
 	clear:both;
 }

2、 父级添加overflow方法：可以通过触发BFC（块级格式化上下文）的方式，实现清楚浮动效果。别加错位置，是给父级元素加overflow属性（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）如下：

overflow:hidden;

注意：元素内容过多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3、使用after伪元素清除浮动：：after方式为额外标签法的升级版，好处是不用单独加标签了。这个是给父元素添加自定义类 .clearfix，代码如下：

.clearfix{
	*zoom:1; //ie6清除浮动的方法
}
.clearfix:after{
	content: "";
	display: block;
	height:0;
	clear:both;
	visibility: hidden;
}

4、使用before和after双伪元素清除浮动，这个也是给父元素添加 自定义类 .clearfix，代码如下：

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

注意：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

5、对父级设置适合CSS高度（不推荐使用）
对父级设置适合高度样式清除浮动。就用上边的例子来说，给 '.box' 设置一定高度即可，一般设置高度需要能确定内容高度才能设置。这里 '.box' 内容高度是200px+上下边框为2px，这样具体父级高度为202px。

6、给父元素设置浮动，但会影响到后面的元素位置（不推荐使用）

利用以上几种清除浮动的方法以后的效果如下：

---

以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! 😄 后续继续更新!!