清除浮动最有效的css写法

本文介绍了五种常见的清除浮动的方法,包括使用空div标签、overflow属性、浮动父元素、:after伪元素等,并对每种方法的优缺点进行了分析。

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

说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢?
可以用display:flex;替代,但是它对IE8,9支持不是很好,所以不怎么这么用。

1.在容器div的里面结束标记之前写如下这样的div这段代码:

<div style="clear:both"></div>

虽然通俗易懂,容易掌握,但是在页面中加入了一个无意义的空标签,违背了结构和表现分离的web标准的精髓,如果页面空标签多的话,对于后期的维护会造成一定的困难。一般来说,现在已经不采用这种方法。

2.在浮动容器div的css样式中加入overflow属性。

3.将父元素也变成浮动元素,但是影响整个页面的布局,不推荐使用。

4.使用:after伪元素,一般增加clearfix的class,大概写法如下:

.clearfix:after{
   content:".";/*加一段内容*/
   display:block;/*让生成的元素以块级元素显示,占满剩余空间*/
   height:0;/*避免生成的内容破坏原有布局高度*/
   clear:both;/*清除浮动*/
   visibility:hidden;/*让生成的内容不可见*/
  }
  .clearfix{zoom:1;/*为IE6,7的兼容性设置*/}

除了clear:both;是为了清除浮动以外,其他的属性就是为了隐藏这个元素,所以我们对它进行了改进一下:

 .clearfix:after,.clearfix:before{
   content:".";/*加一段内容*/
   display:table;/*创建匿名的表格单元,触发bfc*/
}
 .clearfix:after{
   clear:both;/*清除浮动*/
  }
 .clearfix{zoom:1;/*为IE6,7的兼容性设置*/}

.clearfix:before,加上before,对清除浮动没什么作用,防止浏览器顶部空白崩溃,也就是说,margin-top和上一个盒子的margin-bottom它们会发生一个叠加,这么做就是防止叠加,其实没有这个需要,去掉before也没啥问题。
原理和第一种方法差不多,就是用clear:both;

使用的原理基本上就是触动bfc,
bfc:block formating contexts 块级格式化上下文
比如下面这些就是:
float:left;
overflow:auto;
display:table-cell;
display:table-caption;
display:inline-block;
position:fixed;
position:absolute;

目前就是用最后的一种方式来进行清除浮动,毕竟优雅~~~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

泠泠在路上

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值