CSS 浮动 和 清除浮动

CSS 浮动和清除浮动

浮动 float

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

常规布局使用的是标准流，浮动可以达到标准流做不到的效果。

通过浮动可以让块级元素在一行显示，以及达到漂浮层叠的效果。

标准流：盒子无论多宽都会各占整行位置。若父盒子没有定义高度，则直接撑开父盒子

浮动：盒子浮了起来，空白的地方不在占据。若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。

浮动的两个特点：

浮动的元素可以向左向右浮动，直到它的外边框碰到父元素的外边框或另一个浮动框的边框。
由于浮动元素漂浮起来，不占据位置，所以文档的普通流中的元素会占据浮动元素的位置。

浮动float的三种取值：

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

清除浮动

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

也就是说一个盒子里使用了CSS 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、对父级设置高度

（不推荐使用）