大四正在找工作的前端小白一枚,写文章的目的是让自己记忆更加深刻,有不严谨、错误的地方欢迎指正,一定虚心学习请教,谢谢。
(一)关于float属性的几个特性如下:
1、float属性最开始出现的目的是为了处理图文环绕的效果,因此它具有环绕性。
2、使用float的元素会自动加上一个块级框,可以像块元素一样设置宽高。
3、设置了float属性的元素会导致其父元素的坍塌,因此它具有破坏性。
(二)关于清除浮动的几个方式:
1、利用clear属性清除浮动。利用clear属性清除浮动的方式又分为两类,(1)在文档结构中添加空标签;(2)利用after伪类清除浮动。其中以使用伪类清除浮动更为常见,具体代码如下:
.clearfix:before,
.clearfix:after
{
display: table;
content: " ";
}
.clearfix:after
{
clear: both;
}
.clearfix{zoom:1;} //兼容IE6、7
(三)关于clear清除浮动带来的后遗症
html结构:
css样式:
效果:
这是一个很常见的效果,左边的盒子设置了浮动,右边大盒子外层只设置了颜色,右边大盒子内部的标题设置了左浮动,但是右边大盒子内部的标题并没有设置高度,从效果图可以看到右边大盒子的高度和左边盒子一样高。
这个问题出现的原因在于clear的特性,W3C官方文档对于利用clear清除浮动的原理的解释大概是:我们之所以能够使用clear解决float引起的父元素塌陷问题,其实就是因为加了clear的空标签(或者是伪类),把空标签的top值设置在了浮动元素的bottom边缘下方,从而能够撑起父元素。示意图如下:
(四)解决clear带来的后遗症
1、使用position,避开浮动的问题;
2、为右边大盒子设置overflow:hidden或者auto,从而隔离clear的作用范围,构成BFC(BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素)。