清除浮动的方法

Just_do

清除浮动本质: 解决父级元素因为子级浮动引起内部高度为0 的问题。

         清除浮动就是把浮动的盒子圈到里面,让父盒子闭合出口和入口不让他们出来影响其他元素。

清除浮动的方法:

        选择器`{clear:left | right | both;}`

1 额外标签法:
W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如<div style=”clear:both”></div> ,或则其他标签br等亦可。
优点: 代码简洁
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
2 父级添加overflow属性方法
可以通过触发BFC的方式,可以实现清除浮动效果。
可以给父级添加: overflow为 hidden|auto|scroll 都可以实现。
优点: 代码简洁
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
3 使用after伪元素清除浮动

 .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   
 .clearfix {*zoom: 1;}   ie6、7 专有

优点: 符合闭合浮动思想 结构语义化正确
缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
代表网站: 百度、淘宝网、网易等
4 after伪元素空余字符法
content:"200B";这个参数,Unicode字符里有一个“零宽度空格”,即 U+200B,代替原来的“.”,可以缩减代码量。而且不再使用visibility:hidden。

.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }.

当然有些网站也用 content:"0200" 的,都是空格的意思。
代表网站: 阿里巴巴等
5 使用before和after双伪元素清除浮动

.clearfix:before,.clearfix:after{ 
           content:".";
           display:table;
   }
.clearfix:after{
 clear:both;
}
.clearfix{*zoom:1;}

优点: 代码更简洁
缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
代表网站: 小米、腾讯等

阅读 1.7k

没有介绍

242 声望
37 粉丝
0 条评论

没有介绍

242 声望
37 粉丝
文章目录
宣传栏