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;
}

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

 

 

原文地址：https://blog.csdn.net/2301_76671906/article/details/142851743

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！