css 清除浮动

最新推荐文章于 2024-08-25 21:41:11 发布

了优刘_

最新推荐文章于 2024-08-25 21:41:11 发布

阅读量71

点赞数 1

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

本文链接：https://blog.csdn.net/lgg1997/article/details/125300717

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

当子元素使用float布局时，可能导致父元素高度无法自适应。本文介绍了三种解决方法：1) 添加空标签并设置clear:both；2) 给父元素添加overflow样式；3) 使用CSS伪元素after。这些方法能确保父元素包含所有浮动元素，保持布局整洁。

摘要由CSDN通过智能技术生成

css 清除浮动

父元素没有设置高度，子元素使用了 float 浮动布局，导致元素脱离了文档流
从而使父元素的高度不能根据子元素的高度自动适应，影响布局混乱

1. 浮动的元素添加同级的空标签，并设置 clear:both

<div>
  <div class="big_box">
    大盒子
    <div class="small_box">小盒子浮动</div>
    <div class="clear"></div>
  </div>
</div>

.clear {
  clear: both;
}
.big_box {
  padding: 20px;
  background: #c80d0d;
  .small_box {
    float: left;
    background: yellow;
    width: 300px;
    height: 300px;
  }
}

2. 给浮动元素的父元素添加 overflow 样式

<div>
  <div class="big_box">
    大盒子
    <div class="small_box">小盒子浮动</div>
  </div>
</div>

.big_box {
  padding: 20px;
  background: #c80d0d;
  overflow: auto;
  .small_box {
    float: left;
    background: yellow;
    width: 300px;
    height: 300px;
  }
}

3. 给浮动元素的父元素添加 after

<div>
  <div class="big_box">
    大盒子
    <div class="small_box">小盒子浮动</div>
  </div>
</div>

.big_box {
  padding: 20px;
  background: #c80d0d;
  &::after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
  }
  .small_box {
    float: left;
    background: yellow;
    width: 300px;
    height: 300px;
  }
}