盒子模型之浮动的添加与清除方法

浮动的添加

在网页的布局过程中我们需要将一些盒子并排显示比如导航栏一类，因此我们就可以通过元素的浮动来实现这一布局。而浮动应该怎么使用呢？

添加浮动：float：属性值;

属性值：right：向右浮动

               left: 向左浮动

浮动属性通过添加到需要浮动的子元素的css样式中，子元素会根据父级的位置及大小进行浮动。所以其不会超出父元素的范围以及边框范围。浮动过的元素会脱离标准流 ，漂浮在其他元素的上方。并且浮动后的元素不占有原来的位置。并自动转化成行内块元素在同一行显示。

浮动的清除

1、为父级添加overflow: hidden；

2、为父级加高

3、额外标签法

通过在浮动过的父级元素下方添加额外的空标签。

给与标签clear：both属性清除浮动带来的影响。

4、伪元素清除法

clearbox::after{
Content:".";/*不可为空，火狐7.0以前版本会失效*/
Display:block;
Clear:both;
}
.clearfix {*zoom: 1;} /*补充IE6、7的不兼容*/

相同于使用额外标签法，通过伪元素创建多余的标签来清除伪元素；下同

5、双伪元素清除法

.clearfix:before,.clearfix:after { 
 content:"";
 display:table; /* 这句话可以出发BFC用以清除浮动 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

清除浮动的本质就是触发BFC来块级格式化上下元素来达到清除浮动的目的。