本文共 1311 字，大约阅读时间需要 4 分钟。

CSS清除浮动方法学习笔记总结

为什么需要浮动？

浮动（float）在布局中有着重要的作用。它允许我们将多个盒子（div）水平排列成一行，并实现盒子的左右对齐。然而，浮动也有其局限性，特别是在父级元素未设置高度的情况下，浮动的子元素可能会影响父级和后续元素的布局。

浮动的基本概念

浮动是指将一个元素设置为脱离标准文档流（即“脱标”），并移动到指定位置。浮动的子元素不会撑开父级元素的高度，除非父级元素本身设置了高度。

浮动的作用

浮动的语法

在CSS中，通过设置float属性值来实现浮动。常见的属性值有left、right和默认值none。

父级元素设置了高度的情况

当父级元素设置了高度时，子元素设置浮动不会影响父级后面的元素布局。父级元素内部的浮动子元素只会影响父级内部的排列。

父级元素未设置高度的情况

当父级元素未设置高度时，浮动的子元素会占据父级的高度，导致父级高度为0，影响后面的标准流元素布局。这种情况下，必须清除浮动。

清除浮动的方法

1. 使用clear属性

clear属性用于清除浮动，常用值有left、right、both和none。在实际工作中，通常使用clear: both;。

2. 额外标签法（隔墙法）

通过在浮动元素末尾添加一个空的块元素（如<div>），来清除浮动。这种方法简单易懂，但会增加无意义的标签，影响代码结构。

优点：通俗易懂，书写方便。 缺点：代码结构较差，添加大量无意义标签。

3. 父级添加overflow属性

给父级元素设置overflow: hidden，可以清除浮动。这种方法代码简洁，但需要权衡内容溢出是否需要隐藏。

优点：代码简洁，操作方便。 缺点：内容溢出时可能隐藏元素。

4. 使用after伪元素

通过在父级元素上添加::after伪元素，设置为空并清除浮动。这种方法结构语义化较好，但对IE6-7不支持，需添加兼容代码。

优点：结构语义化正确。 缺点：IE6-7兼容性问题。

5. 使用双伪元素

通过在父级元素上设置::before和::after伪元素，设置为表，并在::after清除浮动。这种方法代码简洁，结构语义化较好，但同样面临IE6-7兼容性问题。

优点：代码简洁，结构语义化正确。 缺点：IE6-7兼容性问题。

何时使用清除浮动？

• 父级元素未设置高度。
• 子元素设置浮动，影响父级和后续元素布局。

清除浮动的本质

清除浮动的主要目的是确保父级元素根据浮动子元素的高度自动调整，从而不影响后续元素的布局。

清除浮动的策略

闭合浮动，使其只影响父级内部，不影响父级外的元素布局。

通过以上方法，可以有效地清除浮动，确保布局的正常性。选择哪种方法取决于具体需求，需权衡代码简洁性、兼容性和结构语义化。