闭合浮动元素超级简单的方法

下面是详细讲解“闭合浮动元素超级简单的方法”的完整攻略。

什么是闭合浮动？

当一个元素浮动时，它将会脱离文档流，而其他元素将会绕开它。这时如果父元素没有设置高度或者内部没有包含一个清除浮动的元素，就会出现高度塌陷的问题。这种情况称为浮动元素没有闭合，需要手动进行闭合。

传统的闭合浮动方法

在传统的闭合浮动方法中，你需要在浮动元素后面添加一个空的元素，并给其添加一个清除浮动的样式。

示例代码：

<div class="float_left"></div>
<div class="float_right"></div>
<div class="clearfix"></div>

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

这种方法需要添加额外的元素，增加了文档的复杂度，并且需要手动添加样式，较为繁琐。

新的闭合浮动方法

新的闭合浮动方法利用了 BFC（块级格式化上下文）的特性。当元素形成了 BFC 后，它会形成一个独立的渲染区域，并且浮动元素不会影响到 BFC 区域外部的元素。

具体实现方法有两种：

利用 overflow 属性

将浮动元素的容器设置为 overflow: auto 或 overflow: hidden，即可形成一个 BFC，从而使浮动元素闭合。

示例代码：

<div class="float_container">
    <div class="float_left"></div>
    <div class="float_right"></div>
</div>

.float_container {
    overflow: auto;
}

利用 display 属性

将浮动元素的容器设置为 display: table、display: table-cell 或者 display: flex，也可以形成 BFC，从而使浮动元素闭合。

示例代码：

<div class="float_container">
    <div class="float_left"></div>
    <div class="float_right"></div>
</div>

.float_container {
    display: table;
}

以上两种方法都是通过创建一个新的 BFC 来实现浮动元素的闭合，而无需添加额外的元素和样式。

结语

新的闭合浮动方法可以大大简化代码，减少文档的复杂度，并且不需要手动添加样式，非常方便。但需要注意的是，BFC 的应用可能会影响到文档流和布局，需要在实际项目中谨慎使用。