浮动的添加
在网页的布局过程中我们需要将一些盒子并排显示比如导航栏一类,因此我们就可以通过元素的浮动来实现这一布局。而浮动应该怎么使用呢?
添加浮动: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来块级格式化上下元素来达到清除浮动的目的。