全面分析总结BFC原理及实践

前言

常常在面试中被问到“如何清除浮动？”、“为何 overflow: hidden 能够清除浮动？”等等比较基础的问题。虽然这些题目案在各类写面试题的文章中都有提供答案，但这种教科书式的问答确定不是咱们的目的，与其记住答案不如完全掌握其核心原理——块级格式化上下文（BFC）。

这篇文章主要就是完全分析清楚BFC原理、总结BFC经典场景中的用法，最后再实践分析解决布局中常遇到的问题。

本文首发自迪诺笔记，转载请注明出处😁

1、BFC做用

• 清除浮动：BFC会包含建立它的元素内部的全部内容（包含浮动元素）
• 外边距折叠：解决同一BFC容器中的相邻元素间的外边距折叠问题
• 左图右文布局：利用浮动元产生BFC以及BFC之间不会互相覆盖实现左图右文布局

以上BFC的做用能够当作一次检验，思考下如何实现，本文后面将会有原理以及实现的讲解

2、如何产生BFC

名称	如何产生	备注
html根元素	html元素自己就是一个BFC元素	记住就好，body元素不是BFC
浮动元素	元素的float属性不是none	经常使用
绝对定位元素	position属性为absolute或fixed	经常使用
行内块元素	display属性为inline-block	经常使用
表格元素	表格元素默认display属性便是BFC	表格单元格、表格标题也是
弹性元素	display属性为flex或inline-flex元素的直接子元素	很是重要（flex布局经常使用）
网格元素	display属性为grid或inline-grid元素的直接子元素	新特性用得少
多列容器	元素的column-count或column-width不为auto，包括 column-count为1	新特性用得少
overflow属性	overflow属性值不为visible的元素	经常使用oveflfow：visible
display属性	display属性值为flow-root的元素，flow-root: 一个新的display属性的值，它能够建立无反作用的BFC	用得少
contain属性	contain属性值为layout、content、paint的元素	用得少

总结成一句话：凡脱离文档流均可以产生BFC

3、BFC原理

三种文档定位方式

在讲BFC的原理以前先看看html文档的三种定位方式

普通流

在普通流中，元素按照其在HTML中的前后位置自上而下布局，在这个过程当中，行内元素水平排列，直到当行被占满而后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，不然全部元素默认都是普通流定位，也就是说普通流中元素的位置由该元素在HTML文档中的位置决定。

浮动

在浮动定位中，元素首先按照普通流的位置出现，而后根据浮动的方向尽量的向左边或右边偏移，其效果与印刷排版中的文本环绕类似。

绝对定位

在绝对定位中，元素会总体脱离普通流，所以绝对定位元素不会对其兄弟元素形成影响，而元素具体的位置由绝对定位的坐标决定。

BFC产生做用的缘由

其实BFC是上面三种布局方式中的普通流，BFC会产生一个独立的容器，该容器内部的元素不会在布局上影响到外部的元素，在外部的普通流看来它和其余普通流元素无差异，文档最终会按照上面说的普通流计算布局。

BFC的注意事项

块格式化上下文对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。 浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。 外边距折叠也只会发生在属于同一BFC的块级元素之间。

4、BFC常见用法

为了更好的理解BFC，咱们先看看下面这些常见的用法。

🌰清除浮动防止高度塌陷

按照上面三种定位方式中说的，浮动元素会脱离普通文档流，致使外部元素的高度计算不包括浮动元素自己高度，造成高度塌陷。

高度塌陷

<div class="container">
  <div class="box box1"></div>
</div>
复制代码

.box {
  width: 20px;
  height: 50px;
  float: left; // 脱离了文档流造成了一个BFC
	border: 4px solid green;
}
复制代码

采用上述产生BFC元素的方法之一使外层元素产生BFC，能够防止元素高度塌陷。

.container {
	overflow: hidden; // 外层容器产生BFC
}
复制代码

修复高度塌陷

🌰处理外边距折叠的问题

在普通文档流中，元素（非BFC元素）的外边距margin会自动折叠，产生以下现象。

外边距折叠

<div class="container">
  <div class="box box1 m20"></div>
  <div class="box box2 m20"></div>
</div>
复制代码

.m20 {
  margin: 20px;
}
.box {
  border: 1px solid green;
}
复制代码

这个是html的特性不算bug，可是咱们更但愿margin不产生折叠效果，经过利用BFC元素之间的外边距不会折叠的特性来实现。

<div class="container">
  <div class="box box1 m20"></div>
  <div class="box box2 m20"></div>
</div>
复制代码

.m20 {
  margin: 20px;
}
.box {
  overflow: hidden; // 使得两个box成为BFC元素
  border: 4px solid green;
}
复制代码

使两个box造成BFC或者分别用两个BFC包裹box，而后造成的两个BFC之间的外边距不会折叠，修复后效果以下图。

修复外边距折叠

5、扩展一下

存在块级格式化上下文BFC，则对应存在内联格式化上下文IFC、网格格式化上下文GFC、自适应格式化上下文FFC，这些均可以统称为格式化上下文。

IFC

内联格式化上下文，IFC 的 line box（线框）高度由其包含行内元素中最高的实际高度计算而来，不受到竖直方向的 padding、margin 影响。

IFC示意图

当在内联元素中插入块级元素会产生什么效果呢？在内联元素中插入位置先后的内联元素各自造成一个IFC，而后按照普通文档流进行布局，效果以下图。

内联元素中插入块级元素

GFC

网格布局格式化上下文（display: grid）

FFC

自适应格式化上下文（display: flex）

6、常见问题分析

🍓为何overflow: hidden能够清除浮动？

overflow: hidden使得外层元素产生了一个BFC，BFC的高度计算包含其内部的浮动元素，从而达到清除浮动效果

<div style="border: 5px solid #6EBD91; overflow: hidden;">
  <div style="float: left; border: 5px solid #F4D491;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, maxime fuga assumenda excepturi, exercitationem rerum quae voluptates sunt perspiciatis cupiditate sed itaque officia, placeat minus iure quod expedita earum nam.Eum aliquam totam iure mollitia deserunt, minus repellendus. Harum ullam tenetur, impedit aliquam nobis ut dignissimos eligendi, expedita illum iste esse odio ab quos explicabo, odit architecto. Tempora, hic facilis?</div>
</div>
复制代码

效果以下：

清除浮动

分析过程

外层overflow: hidden的元素产生了一个BFC，自己float: left的元素也产生了一个BFC，外层BFC进行尺寸计算时包含内层BFC尺寸。

结果

🍓经常使用的clearfix清除浮动如何实现？

// 采用after伪元素实现
.clearfix::after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
// 兼容IE6
.clearfix {
  zoom: 1;
}
复制代码

.clearfix类绑定到外层非浮动元素上，clear: both属性确保外层元素在进行高度计算时包含内部浮动元素。

使用clearfix清除浮动的元素自己并未产生BFC，依靠的是CSS的clear属性。即该元素若没有其余属性产生BFC时仍然按照普通文档流进行定位，垂直外边距仍是存在折叠。

🍓如何实现两列自适应布局？

不考虑使用UI框架中的布局组件状况下，直接使用float: left + 固定左侧宽度 + 右边列margin-left

<div>
  <img style="float: left; width: 140px;" src="https://tva1.sinaimg.cn/large/00831rSTly1gcel7v9ji4j3041041wec.jpg" alt="logo">
  <div style="margin-left: 150px;">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos eligendi numquam nihil excepturi sint reiciendis iusto maiores nostrum fugiat harum?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, perspiciatis magnam consectetur corrupti suscipit a ratione sunt commodi beatae ad!</p>
  </div>
</div>
复制代码

实现效果以下图：

左图右文布局

过程分析

左侧部分使用float: left会产生一个BFC元素，这个BFC与右侧块级元素div一块儿进行普通流定位；因为是两个按照普通流定位这个两个元素以前不会产生覆盖，即便不固定左侧元素宽度和右侧块级元素给margin-left也能够实现效果（这里给宽度是为了控制左侧固定尺寸）。

🍓内联元素中使用块级元素会产生什么效果？

内联元素中插入块级元素会在插入的块级元素先后各产生一个匿名块与插入的块按照普通流进行定位

🍓内联元素中使用插入浮动元素会产生什么效果？

内联元素使用了display: inline-block会产生一个IFC，其内部的浮动会在内部进行浮动定位，而后整个IFC当作一个块级元素与外部进行文档流定位

<span style="display: inline-block; background-color: #6EBD91;">
  Lorem ipsum dolor sit amet.
  <span style="float: left; background-color: chocolate;">Lorem, ipsum.</span>
  <div style="background-color: #F4D491;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat labore, ipsa quo possimus mollitia, officiis quia provident inventore placeat nulla, rem velit ratione ducimus. Facilis eos repudiandae debitis quam voluptatem.</div>
  Lorem ipsum dolor sit amet consectetur.
</span>
复制代码

效果以下：

效果

以上效果能够在线预览

参考文章

• MDN-格式化上下文
• MDN-clear
• gihtub-介绍下BFC及其应用
• 知乎专栏-10分钟理解BFC原理

写在最后

既然看到这里了不妨点个赞鼓励下做者呗 :)

做者博客：blog.lessing.online/

做者github：github.com/johniexu