清除浮动的4种方法

一个元素浮动之后，文档中的标准流元素就会表现得像浮动元素不存在一样，当浮动的子级元素的高度超过标准流中的父级元素时，该父级元素不会自动伸高来闭合浮动元素("高度坍塌"现象)
但这并不是我们所希望的，所以我们要清除浮动带来的影响，使该父级元素表现出正常的高度。

举个例子：

div {
  border: 1px solid #000;
  background: gray;
}
p {
  background: red;
  width: 100px;
  height: 100px;
}

<div>
  <p>some text</p>
</div>

上面代码会得到下图的效果：
（p到div上下的间距是p默认带的margin值）

这时如果将p元素设置为浮动float: left;
就会出现父级元素高度坍塌的现象

针对上面类似的高度坍塌现象，下面介绍四种解决方法：
(本文并不探究原理，只记录解决方法)

---

额外标签法(隔墙法)

在最后一个浮动元素后添加一个新标签，给这个新标签设置clear: both;

<div>
  <p>some text</p>
  <div style="clear: both;"></div>
</div>

⚠️：这个新标签必须是块级元素

---

父级 + overflow属性

div {
  border: 1px solid #000;
  background: gray;
  /* */
  overflow: hidden;
}

⚠️：这里overflow属性的值也可以是auto、scroll

---

父级 + after伪元素

给父级添加一个类clear

.clear::after{
  content: '';
  /* ！*/
  display: block;
  height: 0;
  clear: both;
}

---

父级 + 双伪元素

给父级添加一个类clear

.clear::after,.clear::before {
  content: "";
  /* ! */
  display: table;
}
.clear::after {
  clear: both;
}