1、前言

今天笔记的内容是：

• 清除浮动

2、内容

2.1、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类可以体现出浮动效果的影响。

2.2、Clearing floats

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

.cleared {    clear: left;}

效果如下：

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

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

clear 属性取值具体如下：

• both：同时清除左右两侧的浮动

• left：不允许左侧有浮动元素（清除左侧浮动的影响）

• right：不允许右侧有浮动的元素（清除右侧浮动的影响）

2.3、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包含浮动元素以及第一段文字，同时清除掉紧随父级盒子之后的第二段文字的浮动效果。

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

2.3.1、clearfix

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

添加 CSS 代码如下：

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

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

效果如下：

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

2.3.2、overflow

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

添加 CSS 样式：

.bigBox {    overflow: auto;}

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

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

在 MDN 的解释如下：

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

2.3.3、flow-root

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

.bigBox {    display: flow-root;}

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

3、写在最后

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