关于清除浮动塌陷的几种方法总结

关于清除浮动塌陷的几种方法总结

什么是浮动塌陷

浮动塌陷是指在使用CSS中浮动(float)属性时，容器的高度无法被浮动元素撑开，使得容器高度塌陷的现象。

解决浮动塌陷的几种方法

1.给容器添加固定高度

通过给容器添加一个固定高度，可以解决容器高度无法被撑开的问题。但是这种方法存在着高度固定且无法自适应的缺陷。

.container {
  height: 300px;
}

2.给容器添加空标签清除浮动

在容器的最后一个浮动元素后添加一个空标签（如div或span），并利用CSS的clear属性清除浮动，使得容器的高度能够自适应。

<div class="container">
  <div class="float-left">我是浮动元素1</div>
  <div class="float-left">我是浮动元素2</div>
  <div class="clear"></div>
</div>

.float-left {
  float: left;
}
.clear {
  clear: both;
}

3.使用overflow属性清除浮动

将容器的overflow属性设为auto或hidden，可以让容器能够自适应高度，从而解决了浮动塌陷的问题。但是这种方法对于容器内部溢出的内容会被隐藏或截断。

.container {
  overflow: hidden;
}

4.使用after伪元素清除浮动

使用CSS3的after伪元素，并利用clear属性清除浮动，可以有效地解决浮动塌陷的问题，而且不需要在HTML中添加额外的标签。

<div class="container">
  <div class="float-left">我是浮动元素1</div>
  <div class="float-left">我是浮动元素2</div>
</div>

.float-left {
  float: left;
}
.container::after {
  content: '';
  display: block;
  clear: both;
}

示例说明

示例1

<div class="container">
  <div class="float-left">我是浮动元素1</div>
  <div class="float-left">我是浮动元素2</div>
  <div class="clear"></div>
</div>

在这个示例中，我们给容器添加一个空标签，并利用CSS的clear属性清除浮动，使得容器的高度能够自适应。

示例2

.container {
  overflow: hidden;
}

在这个示例中，我们将容器的overflow属性设为hidden，使得容器能够自适应高度，从而解决了浮动塌陷的问题。但是对于容器内部溢出的内容会被隐藏或截断。