CSS的float属性怎么用？如何清除浮动？-html教程-PHP中文网

float属性用于让元素脱离文档流并实现图文环绕或列布局，其常见场景包括文字环绕图片、多列布局及水平导航菜单。清除浮动的常用方法包括：1. 使用clear属性添加空div，优点是直观但增加了冗余html；2. 通过overflow: hidden或auto创建bfc，优点是无需额外标签但可能裁剪内容；3. clearfix伪元素方法，语义良好且推荐使用。浮动导致父元素高度塌陷的原因在于浮动元素脱离文档流，现代布局如flexbox和grid通过保持子元素在文档流中自动撑开容器高度，从根本上解决了该问题。

CSS的float属性怎么用？如何清除浮动？

CSS的float属性，简单来说，就是让元素“浮动”起来，脱离正常的文档流，然后它可以向左或向右移动，直到碰到父容器的边缘或另一个浮动元素。而“清除浮动”则是为了解决浮动元素脱离文档流后，可能导致其父容器高度塌陷或后续内容布局混乱的问题，通过一些方法让父容器重新“包裹”住浮动元素，或者让后续元素不再受到前面浮动元素的影响。

解决方案

float属性在CSS布局中曾扮演过非常重要的角色，尤其是在弹性盒模型（Flexbox）和网格布局（Grid）出现之前。它的核心作用是让块级元素（或其他任何元素）像文本一样环绕另一个元素，最经典的例子就是文字环绕图片。当你给一个图片设置float: left;，图片就会靠左浮动，旁边的文字就会围绕着它排列。

float的用法很简单，它有几个值：

立即学习“前端免费学习笔记（深入）”；

left: 元素向左浮动。
right: 元素向右浮动。
none: 默认值，不浮动。
inherit: 继承父元素的浮动属性。

一个简单的例子：

<div class="container">
    @@##@@
    <p>这是一段文字，它会围绕着左侧的图片进行排列，形成一种图文混排的效果。在早期的网页设计中，这种布局方式非常常见，也很好用。</p>
    <p>再来一段文字，看看它是不是也跟着浮动元素排布。通常情况下，后续的块级元素会尝试占据浮动元素旁边的空间。</p>
</div>

登录后复制

.float-left {
    float: left;
    margin-right: 15px; /* 给图片右侧留点空间 */
    width: 150px;
    height: auto;
}
.container {
    border: 1px solid #ccc;
    padding: 10px;
}

登录后复制

你运行这段代码会发现，图片确实浮动了，文字也环绕了。但你可能也会注意到，如果.container这个父元素本身没有固定高度，它可能会“塌陷”，因为它内部的浮动图片已经脱离了它的文档流，导致父元素看不到它了。这就是“浮动塌陷”的问题。

清除浮动就是为了解决这个问题。clear属性是用来阻止元素在浮动元素旁边出现的。它也有几个值：

left: 在左浮动元素下方显示。
right: 在右浮动元素下方显示。
both: 在左右浮动元素下方显示（最常用）。
none: 默认值，不清除浮动。
inherit: 继承父元素的清除属性。

通常，clear属性是应用于浮动元素之后的元素，或者应用于浮动元素的父元素（通过一些技巧）。

浮动元素有哪些常见的布局场景？

虽然现在我们有了更强大的Flexbox和Grid，但float在某些经典场景下依然有其用武之地，或者说，理解它能帮助我们更好地理解CSS布局的历史演变。

最直观的，就是上面提到的图文混排。你想让一张小图在段落左边，文字自然地绕着它走，float: left;就是最直接的解决方案。这在新闻、博客文章中非常普遍。

<div class="article-body">
    @@##@@
    <p>最新消息显示，某项技术取得了突破性进展，预计将在未来几个月内投入市场。专家认为，这将对行业产生深远影响。</p>
    <p>这项技术的核心在于其创新的算法，能够显著提升处理效率，同时降低能耗，有望解决当前面临的一些关键瓶颈问题。</p>
</div>

登录后复制

其次，在Flexbox和Grid普及之前，float是实现多列布局的利器。比如，一个两列或三列的网站布局，你可能会给左侧边栏设置float: left;，右侧内容区设置float: right;（或者也float: left;然后给宽度），然后用清除浮动来确保页脚在所有列的下方。

<div class="layout-container">
    <div class="sidebar" style="float: left; width: 200px; background-color: #f0f0f0;">
        <h3>侧边栏</h3>
        <ul>
            <li>导航项1</li>
            <li>导航项2</li>
        </ul>
    </div>
    <div class="content" style="float: left; width: calc(100% - 220px); margin-left: 20px; background-color: #e0e0e0;">
        <h3>主要内容</h3>
        <p>这里是页面的主要内容区域，它与侧边栏并排显示。这种布局方式在过去非常流行，构建了无数的网站。</p>
    </div>
    <div style="clear: both;"></div> <!-- 清除浮动，确保后续元素不受影响 -->
</div>
<div class="footer" style="background-color: #ddd; padding: 10px; text-align: center;">
    页脚内容
</div>

登录后复制

这种多列布局方式虽然有效，但维护起来相对复杂，特别是当列高不一致时，还需要额外的技巧来保持视觉上的统一。这也是为什么Flexbox和Grid出现后，大家更倾向于使用它们来构建复杂的网格系统。

最后，float也曾被用来制作水平导航菜单。通过给列表项

设置float: left;，可以将它们从垂直排列变为水平排列。虽然现在display: inline-block;或Flexbox是更常用的方法，但float也曾是选项之一。

<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的float属性怎么用？如何清除浮动？的详细内容，更多请关注php中文网其它相关文章！