CSS浮动怎么用？清除浮动的5种方法

<nav>
    <ul style="list-style: none; padding: 0; margin: 0;">
        <li style="float: left; margin-right: 20px;"><a href="#">首页</a></li>
        <li style="float: left; margin-right: 20px;"><a href="#">关于我们</a></li>
        <li style="float: left;"><a href="#">联系方式</a></li>
        <li style="clear: both;"></li> <!-- 确保导航菜单后的内容不会跑到旁边 -->
    </ul>
</nav>

所以，尽管float在现代布局中的地位有所下降，但理解它的这些经典应用场景，能帮助我们更好地阅读和维护旧代码，也能在特定简单场景下快速实现需求。

清除浮动的方法有哪些？各自的优缺点是什么？

清除浮动是使用float时一个绕不开的话题，因为它直接关系到页面布局的正确性。主要有几种方法，每种都有其适用场景和考量。

1. 使用clear属性（在浮动元素之后添加一个清除浮动的元素） 这是最直接也最容易理解的方法。你可以在浮动元素之后，添加一个空的div或其他块级元素，并给它设置clear: both;（或left/right根据需要）。

<div class="parent">
    <div class="float-item" style="float: left;">浮动元素A</div>
    <div class="float-item" style="float: left;">浮动元素B</div>
    <div class="clearfix-div" style="clear: both;"></div> <!-- 清除浮动的空div -->
</div>
<div class="after-parent">父元素后的内容</div>

• 优点： 简单粗暴，易于理解和实现。
• 缺点： 增加了不必要的HTML标记，这被称为“语义污染”，不利于代码的整洁和维护。在复杂的布局中，可能会导致大量的空div。

2. BFC（块级格式化上下文）方法：overflow: hidden 或 auto 当一个元素创建了BFC（Block Formatting Context）时，它会包含其内部的所有浮动元素。overflow: hidden; 或 overflow: auto; 是创建BFC的常见方式。你只需要将这个属性应用到浮动元素的父容器上。

<div class="parent-overflow" style="overflow: hidden; border: 1px solid red;">
    <div class="float-item" style="float: left;">浮动元素A</div>
    <div class="float-item" style="float: left;">浮动元素B</div>
</div>
<div class="after-parent">父元素后的内容</div>

• 优点： 不需要额外的HTML标记，代码相对干净。
• 缺点： overflow: hidden;可能会导致内容被裁剪（如果子元素溢出父元素），overflow: auto;可能会出现不必要的滚动条。这在某些设计中是不可接受的，比如下拉菜单或弹出层可能会被裁剪。

3. clearfix hack（伪元素方法） 这是目前最推荐和最常用的清除浮动方法，它结合了伪元素::after来模拟一个清除浮动的元素，但又不需要在HTML中添加额外的标记。

.clearfix::after {
    content: ""; /* 必须有内容，哪怕是空的 */
    display: table; /* 或 block，table兼容性更好 */
    clear: both;
}
.clearfix { /* 针对IE6/7的兼容性处理，现在基本不用了 */
    *zoom: 1;
}

然后将clearfix类应用到浮动元素的父容器上：

<div class="parent clearfix" style="border: 1px solid blue;">
    <div class="float-item" style="float: left;">浮动元素A</div>
    <div class="float-item" style="float: left;">浮动元素B</div>
</div>
<div class="after-parent">父元素后的内容</div>

• 优点： 语义化好，不需要额外的HTML标记，是最“干净”的方法。兼容性也非常好。
• 缺点： 对于初学者来说，可能不如直接加空div那么直观，需要理解伪元素和display: table;的作用。

选择哪种方法取决于具体情况。在现代开发中，clearfix hack是首选，因为它兼顾了语义和效果。而overflow: hidden;则在确保不会有内容溢出裁剪问题时，是一个非常简洁的替代方案。至于直接添加空div，除非是极简单或临时性的调试，否则应尽量避免。

为什么浮动会引起父元素高度塌陷？以及现代布局方式如何避免这些问题？

理解浮动导致父元素高度塌陷的根本原因，是掌握CSS布局的关键一步。简单来说，浮动元素会脱离其正常的文档流。想象一下，一个房间里所有的家具都规规矩矩地靠墙摆放，房间的高度是由最高的家具决定的。但如果有些家具“飘”了起来，离开了地面，房间的“高度”就不再把它们计算在内了。

在CSS中，当一个元素设置了float属性，它就不再占用父容器的垂直空间。父容器计算自身高度时，只会考虑其正常文档流中的子元素。如果父容器中唯一的子元素或者所有子元素都浮动了，那么父容器就会认为自己里面“空无一物”，它的高度就会塌陷，甚至变成0。这就导致了后续非浮动元素可能会跑到浮动元素下方，甚至覆盖浮动元素。

看一个例子：

<div class="parent-collapsed" style="border: 2px solid green;">
    <div class="float-child" style="float: left; width: 100px; height: 100px; background-color: lightblue;"></div>
</div>
<div class="sibling" style="background-color: lightcoral; height: 50px;">我是兄弟元素</div>

你会发现，绿色的父容器可能看起来只有一条边框线，而红色的兄弟元素直接跑到了蓝色浮动元素的旁边，甚至下面，而不是在绿色父容器的下方。这就是高度塌陷的直观表现。清除浮动的方法，本质上都是在某种程度上“欺骗”或“强制”父元素，让它重新“看到”并包含这些浮动子元素，从而正确计算自身高度。

现代布局方式如何避免这些问题？

随着CSS的发展，我们有了更强大、更直观的布局模型，它们从根本上解决了浮动带来的这些副作用，因为它们的设计理念就与float不同。

1. Flexbox（弹性盒模型） Flexbox是一种一维布局系统，用于在容器中排列项目，无论是行还是列。Flex项目（子元素）默认情况下不会脱离文档流。它们始终被Flex容器（父元素）包含着，并且Flex容器会根据其内容（包括Flex项目）自动调整大小。

<div class="flex-container" style="display: flex; border: 2px solid green;">
    <div class="flex-item" style="width: 100px; height: 100px; background-color: lightblue;"></div>
    <div class="flex-item" style="width: 100px; height: 120px; background-color: lightgray;"></div>
</div>
<div class="sibling" style="background-color: lightcoral; height: 50px;">我是兄弟元素</div>

这里，.flex-container的高度会自动根据最高的.flex-item来撑开，sibling元素会乖乖地排在flex-container的下方。Flexbox提供了强大的对齐、分布空间和排序能力，是构建组件内部布局的理想选择。

2. Grid（网格布局） Grid是二维布局系统，可以同时控制行和列。Grid容器内的所有Grid项目都明确地属于容器的一部分，并且其位置和大小由Grid系统管理。同样，Grid项目不会脱离文档流，Grid容器的高度会根据其所有Grid项目（包括那些跨多行或多列的）自动计算。

<div class="grid-container" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 2px solid green;">
    <div class="grid-item" style="height: 100px; background-color: lightblue;"></div>
    <div class="grid-item" style="height: 120px; background-color: lightgray;"></div>
</div>
<div class="sibling" style="background-color: lightcoral; height: 50px;">我是兄弟元素</div>

和Flexbox一样，grid-container也会自动包含其子元素，高度不会塌陷。Grid非常适合构建整个页面的宏观布局，因为它能轻松创建复杂的行和列结构。

总而言之，Flexbox和Grid通过更高级、更智能的布局算法，使得元素在容器内部的定位和尺寸计算更加健壮和可预测。它们将子元素视为容器的固有部分，而不是像float那样让子元素“飘”出去。因此，在新的项目中，除非有特定的历史包袱或极简单的图文混排需求，我们通常会优先选择Flexbox或Grid来解决布局问题，从而彻底避免了浮动带来的高度塌陷和清除浮动的心智负担。

今天关于《CSS浮动怎么用？清除浮动的5种方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！