CSS浮动和清除浮动：掌握浮动和清除浮动的技巧

1. 什么是CSS浮动

CSS浮动（float）是一种布局技术，可以将元素从正常的文档流中脱离，并使其根据指定的方向漂浮在其他元素的周围。浮动元素可以向左或向右浮动，浮动元素的特点是可以与其他浮动元素进行重叠。

在CSS中，我们可以使用float属性来定义一个元素的浮动状态。常见的取值有left（向左浮动）、right（向右浮动）和none（不浮动，即取消浮动状态）。

示例代码：

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }
</style>

<div class="box"></div>

运行结果：会在页面中生成一个宽高为200px的红色方块，这个方块向左浮动。

2. 浮动的应用场景

浮动最常见的应用场景是实现网页布局中的多列布局。通过将多个元素浮动到左侧或右侧，可以实现多列的效果。当浮动的元素超出父容器的宽度时，会自动换行并继续浮动。

除了多列布局，浮动也常用于图像的布局，可以实现图文混排的效果。通过将图像浮动到左侧或右侧，文本可以自动环绕在图像周围，达到视觉上的良好效果。

而在响应式设计中，也常用浮动来实现移动端的布局。通过设置多个元素的浮动方式，可以使得在不同屏幕宽度下，元素的排列方式发生变化，以适应不同设备的展示需求。

3. CSS浮动的特性

3.1 元素脱离文档流

浮动元素会从正常的文档流中脱离，不再占据原本的空间。这意味着，浮动元素后面的元素会将其空间填充，不会发生空隙的情况。

3.2 浮动元素重叠

多个浮动元素可以重叠在一起。当多个浮动元素在水平方向上浮动时，它们可以相互重叠，直到空间不足为止。但是要注意，重叠的浮动元素始终按照其在HTML中的顺序进行排列。

示例代码：

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
        margin-right: 10px;
    }
</style>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

运行结果：会在页面中生成三个宽高相同的、背景色为红色的方块，它们会水平排列，并且中间会有10px的间距。

3.3 浮动元素不会覆盖文字

浮动元素不会覆盖文字，即文字会自动环绕在浮动元素周围。这对于实现图文混排的效果非常有用。

示例代码：

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
        margin-right: 10px;
    }
</style>

<div class="box"></div>
<p>
    这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字。
</p>

运行结果：会在页面中生成一个宽高为200px的红色方块，这个方块位于文字的左侧，并且文字会环绕在方块的周围。

4. 清除浮动的方法

在使用浮动布局时，经常会遇到浮动元素造成的父容器高度塌陷的问题。这是因为浮动元素脱离了文档流，不再占据空间，导致父容器高度无法被正确计算。为了解决这个问题，我们需要清除浮动。

4.1 使用空的div清除浮动

通过在浮动元素后面添加一个空的div，并设置其clear属性为both，可以清除浮动效果。

示例代码：

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
        margin-right: 10px;
    }

    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
</style>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="clearfix"></div>

运行结果：会在页面中生成三个宽高相同的、背景色为红色的方块，它们会水平排列，并且中间会有10px的间距。下面会有一个空的div元素，通过这个空的div元素清除了浮动。

4.2 使用父容器的clearfix类清除浮动

通过向父容器添加一个clearfix类，可以清除子元素的浮动效果。clearfix类的样式与前述方法相同。

示例代码：

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
        margin-right: 10px;
    }

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

    .container {
        overflow: hidden;
    }
</style>

<div class="container clearfix">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

运行结果：会在页面中生成一个父容器，其内部包含三个宽高相同的、背景色为红色的方块，它们会水平排列，并且中间会有10px的间距。通过给父容器添加clearfix类，清除了子元素的浮动。

4.3 使用伪元素清除浮动

通过在父容器上添加一个伪元素，并设置其clear属性为both，可以清除子元素的浮动。

示例代码：

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
        margin-right: 10px;
    }

    .container::after {
        content: "";
        display: table;
        clear: both;
    }
</style>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

运行结果：会在页面中生成一个父容器，其内部包含三个宽高相同的、背景色为红色的方块，它们会水平排列，并且中间会有10px的间距。通过给父容器添加伪元素，清除了子元素的浮动。