清除浮动的方法

2024年1月11日 106次阅读 来源: 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。
代表网站： 小米、腾讯等

    原文作者：Just_do
    原文地址: https://segmentfault.com/a/1190000015400830
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞