css 快速入门 系列 —— 浮动

浮动

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

概念

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

卡住

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

浮动与行框盒子

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

请看示例：

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

float 的本质

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

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

float 从文档流中脱离

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

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

块布局

由于 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

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

// 核心代码：
<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。

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

效果如下：

// 核心代码
.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 来解决此问题。就像这样：

// 核心代码

<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 重写上面的“一侧定宽的两栏自适应布局”：

// 核心代码

<!-- `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。并且会变成块级元素。