浮动元素不会增加容器元素的高度，因此如果您不清除它们，容器高度不会增加......

我将直观地向您展示：

更多解释：

<div>
  <div style="float: left;"></div>
  <div style="width: 15px;"></div> <!-- This will shift 
                                        besides the top div. Why? Because of the top div 
                                        is floated left, making the 
                                        rest of the space blank -->

  <div style="clear: both;"></div> 
  <!-- Now in order to prevent the next div from floating beside the top ones, 
       we use `clear: both;`. This is like a wall, so now none of the div's 
       will be floated after this point. The container height will now also include the 
       height of these floated divs -->
  <div></div>
</div>

您也可以添加overflow: hidden;容器元素，但我建议您clear: both;改用。

此外，如果您想自行清除可以使用的元素

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

CSS 浮动是如何工作的？

什么是浮点数，它有什么作用？

• 大多数初学者都误解了该float属性。那么，具体是float做什么的呢？最初，该float属性被引入以在图像周围流动文本，这些图像是浮动的left或right. 这是@Madara Uchicha 的另一个解释。

那么，使用该float属性将盒子并排放置是错误的吗？答案是 否定 的；如果您使用该float属性来并排设置框，则没有问题。

• 浮动inline或block级别元素将使元素表现得像一个inline-block元素。

演示

• 如果浮动一个元素left或right，width该元素的 将被限制在它所拥有的内容中，除非width明确定义…

• 你不能float一个元素center。这是我一直在初学者中看到的最大问题， using ，这不是该属性 float: center; 的有效值。通常用于/移动内容到最 左边 或最 右边 。属性只有 四个 有效值，即、、（默认）和。float``float``float __float``left``right``none``inherit

• 父元素折叠，当它包含浮动的子元素时，为了防止这种情况，我们使用clear: both;属性，清除两边的浮动元素，这样可以防止父元素折叠。有关更多信息，您可以在此处参考我的另一个答案。

• （重要） 想想我们有一堆各种元素的地方。当我们使用float: left;或float: right;元素在堆栈上方移动一个时。因此，普通文档流中的元素将隐藏在浮动元素后面，因为它位于普通浮动元素之上的堆栈级别。 （请不要将其与此联系起来，z-index因为那是完全不同的。）

以一个案例为例来解释 CSS 浮动是如何工作的，假设我们需要一个简单的 2 列布局，带有页眉、页脚和 2 列，那么蓝图是这样的......

在上面的示例中，我们将只浮动红色框，您可以float同时浮动到
，left或者您可以浮动float到left，另一个浮动right也取决于布局，如果它是 3 列，您可以float2
列到left另一个一到right如此取决于，虽然在这个例子中，我们有一个简化的 2
列布局，所以float一到left，另一列到right.

用于创建布局的标记和样式进一步解释…

<div class="main_wrap">
    <header>Header</header>
    <div class="wrapper clear">
        <div class="floated_left">
            This<br />
            is<br />
            just<br />
            a<br />
            left<br />
            floated<br />
            column<br />
        </div>
        <div class="floated_right">
            This<br />
            is<br />
            just<br />
            a<br />
            right<br />
            floated<br />
            column<br />
        </div>
    </div>
    <footer>Footer</footer>
</div>

* {
    -moz-box-sizing: border-box;       /* Just for demo purpose */
    -webkkit-box-sizing: border-box;   /* Just for demo purpose */
    box-sizing: border-box;            /* Just for demo purpose */
    margin: 0;
    padding: 0;
}

.main_wrap {
    margin: 20px;
    border: 3px solid black;
    width: 520px;
}

header, footer {
    height: 50px;
    border: 3px solid silver;
    text-align: center;
    line-height: 50px;
}

.wrapper {
    border: 3px solid green;
}

.floated_left {
    float: left;
    width: 200px;
    border: 3px solid red;
}

.floated_right {
    float: right;
    width: 300px;
    border: 3px solid red;
}

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

让我们一步一步来布局，看看浮动是如何工作的。

首先，我们使用主包装器元素，您可以假设它是您的视口，然后我们使用header并分配 a
heightof50px所以没什么特别的。它只是一个普通的非浮动块级元素，它将占用100%水平空间，除非它是浮动的或我们分配inline- block给它。

在我们的示例中，第一个有效值float是left，我们使用float: left;for
.floated_left，因此我们打算将一个块浮动到left容器元素的 。

柱子向左浮动

是的，如果你看到.wrapper折叠的父元素，你看到的带有绿色边框的元素没有展开，但它应该是对的？稍后会回到那个，现在，我们有一个列浮动到left.

来到第二列，让它float这一列right

另一列向右浮动

在这里，我们有一个300px宽的柱子，我们float将right它放在第一列的旁边，因为它浮动到left，并且由于它浮动到left，它创建了到
的空槽right，并且由于 有足够的空间right，我们的right浮动元素完美地坐在旁边left。

尽管如此，父元素还是折叠了，好吧，现在让我们修复它。有很多方法可以防止父元素折叠。

• 添加一个空的块级元素并clear: both;在包含浮动元素的父元素结束之前使用，现在这个是clear浮动元素的廉价解决方案，可以为您完成这项工作，但我建议不要使用它。

<div style="clear: both;"></div>在结束之前添加.wrapper div，例如

<div class="wrapper clear">
    <!-- Floated columns -->
    <div style="clear: both;"></div>
</div>

演示

好吧，这很好地解决了，不再有折叠的父级，但它向 DOM 添加了不必要的标记，因此有人建议，overflow: hidden;在包含浮动子元素的父元素上使用，这些子元素按预期工作。

使用overflow: hidden;在.wrapper

.wrapper {
    border: 3px solid green;
    overflow: hidden;
}

演示

每次我们需要时，这都会为我们节省一个元素，clear float但是当我用它测试各种案例时，它在一个特定的案例中失败了，它box- shadow在子元素上使用。

演示 （无法看到所有 4 个侧面的阴影，overflow: hidden;导致此问题）

所以现在怎么办？保存一个元素，不要overflow: hidden;再去寻找一个清晰的修复技巧，在你的 CSS
中使用下面的代码片段，就像你overflow: hidden;用于父元素一样，在父元素上调用class下面的代码来自我清除。

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

<div class="wrapper clear">
    <!-- Floated Elements -->
</div>

演示

在这里，阴影按预期工作，而且它会自动清除防止折叠的父元素。

最后，我们clear在浮动元素之后使用页脚。

演示

反正什么时候float: none;使用，因为它是默认值，所以有什么用声明float: none;？

好吧，这取决于，如果您要进行响应式设计，您将多次使用此值，当您希望浮动元素以特定分辨率呈现在另一个下方时。因为该float: none;属性在那里起着重要作用。

很少有真实世界的例子说明如何float有用。

• 我们已经看到的第一个示例是创建一个或多个列布局。
• 使用imgfloated insidep将使我们的内容能够四处流动。

演示 （不浮动img）

Demo 2 (img浮动到left)

• 用于float创建水平菜单 - 演示

浮动第二个元素，或者使用 margin

最后但并非最不重要的一点是，我想解释一下这种特殊情况，其中您float只有一个元素，left但您没有float其他元素，那么会发生什么？

假设如果我们float: right;从我们.floated_right class的
中移除，div则将被从极端渲染，left因为它没有浮动。

演示

所以在这种情况下，你也float可以left

或者

您可以使用margin-leftwhich 将等于左浮动列的大小，即200px宽。