清除浮动的方法

最新推荐文章于 2020-08-30 20:55:34 发布

看到了你

最新推荐文章于 2020-08-30 20:55:34 发布

阅读量251

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html 文章标签： css

本文链接：https://blog.youkuaiyun.com/chen1042246612/article/details/86708659

html 专栏收录该内容

22 篇文章

订阅专栏

本文深入讲解CSS清除浮动的多种方法，包括clear属性、额外标签法、父级overflow属性及伪元素应用，对比不同方法的优缺点，适用于网页布局优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

清除浮动的方法

其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}   clear 清除

属性值描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差。我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。

父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点：符合闭合浮动思想结构语义化正确

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站：百度、淘宝网、网易等

注意： content:"" 尽量不带点

使用before和after双伪元素清除浮动

使用方法：

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

优点：代码更简洁

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。