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

作者:WangMin

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

什么是浮动 float？

标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。

浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开）。

div配合float浮动来做页面的布局，浮动最常用的地方就是用来做布局。只要一个标签设置了浮动float属性，就会变成块级标签。

浮动的两个特点：

• 浮动的元素可以向左向右移动，直到它的外边框碰到父元素的外边框或另一个浮动框的边框为止。
• 由于浮动框不在文档的普通流中，所以文档的普通流中的元素表现的就像浮动框不存在一样。

浮动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。

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

---

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