0
点赞
收藏
分享

微信扫一扫

css清除浮动 常用的方法

萍儿的小确幸 2022-01-05 阅读 60
  • 清除浮动主要是为了解决子元素浮动导致父盒子高度为0的问题

清除浮动的方法

1.第一种

额外标签法 : 给谁清除浮动,就在其后额外添加一个空白标签 。

  <div class="home">
      <div class="first">first</div>
      <div class="second ">second </div>
      <div class="clear">额外标签法</div>
  </div>
.clear{
        clear:both;
    }
2.第二种

给父级添加overflow

可以通过触发BFC的方式,实现清楚浮动效果。必须定义width或zoom:1,同时不能定义height,
使用overflow:hidden时,浏览器会自动检查浮动区域的高度
3.第三种

使用伪元素清除浮动:头部添加:after 和尾部添加:before

 <div class="home">
    <div class="first father">first</div>
    <div class="second ">second </div>
    <div class="clear">额外标签法</div>
 </div>
.father:after,
.father:before {
  content: "";
  display: block;
  clear: both;
}
举报

相关推荐

0 条评论