清除浮动的几种方法

清除浮动的目的：解决高度塌陷。

方法

clear: both 1.0

<style>
  .clear-fix {
    clear: both;
  }
  .item {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #7fffd4;
  }
</style>
<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clear-fix"></div>
  </div>

clear: both 2.0

<style>
  .box:after {
    content: ' ';
    display: block;
    clear: both;
  }
  .item {
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: #7fffd4;
  }
</style>
<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

注意只能使用:after添加clear:both, 因为只有在所有浮动的元素的最后面添加clear:both才是有意义的。

overflow

<style>
  .box {
    overflow: hidden;
  }
  .item {
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: #7fffd4;
  }
</style>
<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

原因：overflow： hidden会重新创建一个BFC这样就解决了高度塌陷的问题。

图片.png

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

清除浮动的几种方法

清除浮动的几种方法

清除浮动的目的：解决高度塌陷。

方法

相关阅读更多精彩内容

友情链接更多精彩内容

清除浮动的几种方法

清除浮动的目的： 解决高度塌陷。

方法

相关阅读更多精彩内容

友情链接更多精彩内容

清除浮动的目的：解决高度塌陷。