HTML清除浮动的几种方法

1.父元素浮动

给父元素设置浮动后,子元素的浮动会归位,不过如果还有父元素,还需要设置。不推荐使用。

2.空标签设置

在元素末尾插入一个无意义标签,并且设置css为clear:both;

<div style="background: #000;">
  <p style="float: left;color:#fff">
    我是浮动内容
  </p>
  <div style="clear: both;"></div>
</div>

3.设置伪类方式

使用伪类的:after方式,给清除浮动,比较流行使用这个。

<style type="text/css">
    .clearfix:after{
      content: '.';
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
  </style>
  <div style="background: #000;" class="clearfix">
    <p style="float: left;color:#fff">
      我是浮动内容
    </p>
  </div>

上面的css可以进一步优化

.clearfix:after{
  content: '';
  display: table;
  clear: both;
}

4.显示方式属性

给父元素设置overflow,即可清除里面的浮动

<div style="background: #000;overflow: auto;">
  <p style="float: left;color:#fff">
    我是浮动内容
  </p>
</div>

BFC属性

只要触发了bfc,就会清除浮动

相关触发:

overflow: auto;
overflow: hidden;
display: inline-block;
display: table-cell;
display: table-caption;
position: absolute;
position: fixed;
float: left;
float: right;

 

上一篇 宝塔数据库无法启动傻瓜解决办法
下一篇 Linux 快捷方式用管理员权限启动
目录
applek

applek管理员

个人说明在个人中心里面设置

本月创作热力图

最新评论
hui
hui
8月19日
能否支持微信第三方登录啊?
Fiee
Fiee
7月21日
我网站基本上都装了,速度确实有所提升,还免费。我不喜欢白嫖,加你QQ没同意,网站也没有打赏通道 想支持一下的。
小超
小超
7月9日
下个版本考虑将下载地址加密(防止采集)
Lvtu
Lvtu
7月4日
qiang厉害
评论于留言建议
chinacnd
chinacnd
6月26日
这个主题是怎么做到加载速度那么快的?