css-子元素使用浮动(float)属性,父元素可能会高度塌陷(前端浮动后 不撑开父盒子)

1.场景

        在前端开发中,当子元素使用浮动(float)属性后,父元素可能会出现高度塌陷的问题,即父元素的高度没有被子元素撑开。这是因为浮动元素脱离了文档流,不再占据父元素的空间。

2.解决方法 

2.1使用 clear 属性

在父元素的最后一个子元素上使用 clear 属性,以确保它不会浮动到浮动元素的旁边。例如:

<div class="parent">
  <div class="float-child">浮动元素</div>
  <div class="clear-child">清除浮动</div>
</div>
.float-child {
  float: left;
}

.clear-child {
  clear: both;
}
2.2使用伪元素清除浮动 

使用伪元素 ::after 来清除浮动。这种方法比较简洁,不需要额外的 HTML 元素。 

.parent::after {
  content: "";
  display: table;
  clear: both;
}
 2.3使用overflow 属性

在父元素上设置 overflow 属性为 auto 或 hidden,这样父元素会自动包含其浮动的子元素。 

.parent {
  overflow: auto;
}
 2.4 使用 Flexbox 布局

使用 Flexbox 布局可以更方便地处理浮动问题,因为 Flexbox 本身会自动处理子元素的高度和宽度。

<div class="parent">
  <div class="float-child">浮动元素</div>
</div>
.parent {
  display: flex;
}
2.5使用 Grid 布局 

Grid 布局也可以很好地处理浮动问题,因为它能够自动调整子元素的大小和位置。

<div class="parent">
  <div class="float-child">浮动元素</div>
</div>
.parent {
  display: grid;
}

 通常,使用伪元素清除浮动的方法是最简洁和常用的。

 

 

上一篇:Ubuntu 22.04静态IP的修改


下一篇:8种典型的生成式AI应用架构