携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

1️⃣前言

今天笔记的内容是：

清除浮动

2️⃣内容

Introduction

为什么要清除浮动？前面讲过，当添加浮动属性后，浮动元素会被移出正常文档流。此时，其他元素会显示在浮动元素的下方。有时，我们的需求是停止浮动元素后面的浮动行为。

因此，我们需要清除浮动元素造成的影响，方法是给后面元素添加clear属性

举个例子：

<!-- HTML结构，忽略文字 -->
<h2>...</h2>
<div class="box"></div>
<p class="special"></p>
<p></p>
<p></p>

/* CSS */
.box {
    width: 120px;
    height: 180px;
    background-color: violet;
    border-radius: 28px;
    float: left;
    margin: 10px;
}

.special {
    background-color: skyblue;
    padding: 10px;
}

在上面这个例子中，紫色盒子box添加了浮动属性，第一个段落special类可以体现出浮动效果的影响。

Clearing floats

在上面这个例子中，向浮动盒子下的第二个段落，添加cleared类，然后添加CSS样式：

.cleared {
    clear: left;
}

效果如下：

可以看到，第二个段落已经停止浮动，也就没有跟随浮动盒子排版了。

添加样式clear: left;表明停止任何左浮动，也就是清除左边的浮动元素。

clear属性取值具体如下：

属性值	含义
both	同时清除左右两侧的浮动
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）

Example

我们来看另一个清除浮动的使用场景。

<!-- HTML结构，忽略段落文字 -->
<div class="bigBox">
    <div class="floatbox"></div>
    <p>...</p>
</div>
<p></p>

/* CSS样式 */
.bigBox {
    background-color: skyblue;
    padding: 8px;
    color: white;
    border: 2px solid black;
}

.floatbox {
    width: 120px;
    height: 200px;
    background-color: violet;
    border-radius: 28px;
    margin: 10px;
    float: left;
}

可以看到，很高的浮动元素和一个很短的段落元素包含在父级盒子内。将蓝色背景属性置于第一个段落上，那么这个背景色将处于浮动盒子下。

如果需求如下：

将父级盒子bigBox包含浮动元素以及第一段文字，同时清除掉紧随父级盒子之后的第二段文字的浮动效果。

那么，有三种解决方案（技巧），如下所示：

clearfix

向包含浮动内容及其本身的盒子后方插入一些生成的内容，并将生成的内容清除浮动。

添加CSS代码如下：

.bigBox::after {
  content: "";
  clear: both;
  display: block;
}

此时通过清除伪元素的浮动，明显达到了撑起父级元素高度的目的。

效果如下：

注意，上述代码添加诸如div空元素并设置其样式为clear:both的效果是等效的。

overflow

另一个解决方案（小技巧）就是将父级盒子的的overflow属性设置为除visible外的其他值。需要注意的是接受除visible以外的属性值。

添加CSS样式：

.bigBox {
    overflow: auto;
}

在父级元素上添加overflow: auto样式规则。此时，盒子应再一次停止浮动。

效果也一样：

这个方案的有效原因在于创建了所谓的BFC规则。

在MDN的解释如下：

可以把它看作页面内部包含所需元素的一小块布局区域。如此设置可以让浮动元素包含在 BFC 及其背景之内。大部分情况下这种小技巧都可以奏效，但是可能会出现莫名其妙的滚动条或裁剪阴影，这是使用 overflow 带来的一些副作用。

flow-root

最后一个技巧是添加display属性。

.bigBox {
    display: flow-root;
}

这个方法无需创建BFC规则，也能清除浮动。达到的效果也一样。

3️⃣写在最后

好了，今天的笔记就记到这里。

【CSS·清除浮动】Clearing floats：clear、clearfix、overflow、flow-root