css 快速入门 系列 —— 浮动

浮动

以 mdn float 文档 为基础，逐一介绍浮动的本质、浮动的诸多特性、清除浮动以及块格式化上下文（bfc）。

概念

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

卡住

如果包含块太窄，无法容纳容纳水平排列的多个浮动元素，那么其他浮动元素会向下移。如果浮动元素高度不同，就会出现”卡住“的情况：

box 1

box 2

box 3

浮动与行框盒子

如果文字很长，需要两行显示，而且在长文字后面跟着一个向右浮动的元素，请问该浮动元素会显示在第一行还是第二行？

请看示例：

Lorem ipsum dolor sit amet consectetur
more

浮动元素会显示在第二行。因为浮动元素会根据行框盒子进行定位，这里有两行，也就是两个行框盒子，而 ”more“ 在第二行的行框盒子后面。

float 的本质

创建 float 或许是为了实现文字环绕图片的效果。就像这样：

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro vero aliquid nisi nobis omnis iste,

其中图片是左浮动 float:left;

float 从文档流中脱离

浮动元素虽然从文档流中脱离，但有时还是会影响不浮动的元素。

position:absolute 也会从文档流中脱离，但不会影响不浮动的元素。我们将 文字环绕图片 的例子用绝对定位重写一下：

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro vero aliquid nisi nobis omnis iste,

块布局

由于 float 意味着使用块布局，所以该浮动元素的 display 的计算值会发生变化。通常会变成 block。请看示例：

<span id="id1" style="float:left"></span>

let elem = document.getElementById('id1')
let display = window.getComputedStyle(elem).getPropertyValue('display')
// display:  block
console.log('display: ', display);

所以不要再写如下代码：

span {
 float: left;
 display: block; /* 多余 */
}

Tip: float 元素的 display 变化值，对应关系表请看 mdn。

浮动使高度塌陷

如果一个元素里只有浮动元素，那它的高度会是 0。就像这样：

// 核心代码：
<div style="border:1px solid red;">
    <img style="float:left">
</div>

浮动使父元素高度塌陷，是因为浮动元素不在文档流中。

clear

可以使用 clear 属性来处理浮动使父元素高度塌陷的问题。

clear: none | left | right | both

字面翻译为”清除左浮动“，或”清除右浮动“，其实这样理解有误。请看示例：

Lorem ipsum, dolor

// 核心代码：
<div style="border:1px solid red;">
    <img style="float:left">
    Lorem ipsum, dolor
    <div style="border:1px solid blue;clear:both;"></div>
</div

虽然我们使用了 clear:both，却只解决了父元素高度塌陷问题，而浮动还是存在，因为文字仍旧环绕着图片，故浮动没有消除。

实际上，clear 表示框（或行框）的哪些边（左边或右边）不应该挨着浮动框。对于 clear 元素，浏览器在该元素顶部添加足够多的外边距，使元素垂直下降到浮动框下面。

更通俗的说法是”左侧抗浮动“、”右侧抗浮动“、”两侧抗浮动“。

clear:both

clear:both 不是两侧抗浮动，准确的理解应该是左侧抗浮动，或右侧抗浮动。

思考这么一个情况：如果有三个向左浮动的元素，同时在第二个元素上添加 clear:both，请问是变成两行还是三行？

答：是 2 行。

请看示例：

为什么会这样？因为在 mdn float 文档 中写着”清除之前”的浮动，也就是说不管后端的浮动

Tip：既然只管前面的浮动，而元素要么左浮动，要么右浮动，所以 clear:left、clear:right 就没什么用了，直接写 clear:both 就好。

clearfix

如果要让父元素包含浮动的子元素，有一种方法叫做 clearfix，即 clear 一个不浮动的 ::after 伪元素。请看效果：

// 核心代码
.f-clearfix::after{display:block;content:'';clear:both;}

<div class="f-clearfix">
    <img style="float:left">
</div>

Tip: clear 属性只有块级元素才有效。故 display 也可以设置为 table、list-item。

一侧定宽的两栏自适应布局

效果如下：

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, nobis.

// 核心代码
.f-clearfix::after{display:block;content:'';clear:both;}

<!-- f-clearfix 解决父元素高度塌陷，margin-left 解决文字环绕图片 -->
<div class="f-clearfix">
    <img style="float:left;width:60px">
    <div style="margin-left:70px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, nobis.</div>
</div>

注：浮动图片与右侧盒子的间距，这里使用图片的宽度+间隙宽度（margin-left:60px + 10px），如果只在图片上使用 margin-right:10px，仍然会存在文字环绕图片的问题。

margin 不会合并

浮动元素的垂直 margin 不会合并。请看示例：

// 核心代码
<div class='float:left;margin:10px'></div>
<div class='float:left;margin:10px'></div>

由于没有发生合并，所以两个盒子的垂直外边距是 10px + 10px。

块格式化上下文（BFC）

如果一个元素具有 bfc，那么它的内部元素在怎么折腾，也不会影响外部元素，而且也不会被外部元素所影响。

浮动使高度塌陷，我们有时会在父元素上设置 overflow:hidden 来解决此问题。就像这样：

Lorem, ipsum dolor.

// 核心代码

<div class="overflow:hidden">
    <img style="float:left">
</div>
<p>Lorem, ipsum dolor.</p>

创建 bfc 有很多方式，overflow:hidden 就是其中一种。如果不将浮动带来的高度塌陷这个问题解决，那么就会影响到后面元素的布局，这显然会违背 bfc 的特性。

overflow:hidden/auto 是创建 bfc 众多方式中为数不多的好方法。如果不考虑兼容性，display:flow-root 则是创建 fbc 最佳方式

Tip: 更多创建 bfc 的方式请看 mdn bfc。

bfc 与自适应布局

bfc 除了可以清除 float 的影响、去除 margin 重叠，还可以实现更健壮的自适应布局。

我们使用 bfc 重写上面的“一侧定宽的两栏自适应布局”：

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, nobis.

// 核心代码

<!-- `overflow:hidden;` 解决父元素高度塌陷 -->
<div class="overflow:hidden;">
    <!-- `margin-right:10px` 增加与右侧盒子的间距 -->
    <img style="float:left;width:60px;margin-right:10px">
    <!-- `overflow:hidden;` 解决文字环绕图片 -->
    <div style="overflow:hidden;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, nobis.</div>
</div>

Tip: 如果你的产品只需要支持 firefox 53+、chrome 58+、edge 79+，你就可以使用 display:flow-root 来创建无副作用的 bfc。并且会变成块级元素。