CSS浮动、清除浮动与BFC

文章版权归饥人谷_Lyndon以及饥人谷所有。

1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？

特征：浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；浮动元素不在文档普通流之中，因此文档普通流中的块级元素感知不到浮动元素的存在。
对父容器的影响：浮动元素脱离文档流向左或者向右移动，直到边框碰到父元素的边缘。

1-1.png

对其他浮动元素的影响：浮动元素都向某个方向移动，直到其边框碰到其他元素的边框，如果包含框太窄，无法容纳多个浮动元素，那么其浮动元素向下移动，直到拥有足够的空间，如果浮动元素的高度不同，那么它们向下移动时可能被其他浮动元素卡住。

1-2.png
浮动元素一个挨着一个 1-3.png

无法被一行容纳的浮动元素向下移动

1-4.png

框3被框1卡住了
对普通元素的影响：没有什么影响，普通元素感知不到浮动元素的存在。但是普通元素的文字会受到影响。

1-5.png

普通元素感知不到浮动元素的存在

1-n.png

普通元素的文字受到影响
对文字的影响：浮动元素旁边的文字框被缩短，从而给浮动元素留出空间，文字框围绕浮动元素。

1-6.png

若希望围绕行框阻止浮动框，需要使用clear属性。

1-7.png

2. 清除浮动指什么? 如何清除浮动?

清除浮动：清除浮动指的是运用clear属性去解决浮动父容器高度塌陷的问题，clear属性规定元素的哪一侧不允许其他浮动元素。
可选择的值有：left, right, both, none, inherit
清除浮动方法1：在最后添加一个空div，对它进行清理，缺点是增加了一个无意义标签。

2-1.png

清除浮动方法2：BFC（Block Format Content）清理浮动，BFC可以阻止垂直外边距折叠、不会重叠浮动元素、可以包含浮动。因此清理浮动在BFC的语境下就是“包含浮动”，也即让父容器形成BFC就可以。

2-2.png

3. BFC 是什么？如何生成 BFC？BFC 有什么作用？

• 在了解BFC之前，需要先了解：box, formatting context的概念。

Box：CSS布局的基本单位
一个页面由很多Box组成，元素的类型和display属性决定这个Box的类型，不同类型的Box会参与不同的Formatting Context，Box内的元素会以不同方式进行渲染。主要的Box有以下几种：
块级元素 block-level box: display属性为block, list-item, table的元素，会生成block-level box，并且参与block formatting context
行内元素 inline-level box: display属性为inline, inline-block, inline-table的元素，会生成inline-level box，并且参与inline formatting context
run-in box，还没有涉及到。


formatting context：W3C CSS2.1规范中的概念
它是页面中的一块渲染区域，并且有一套渲染规则，它决定其子元素如何定位、和其他元素之间的关系与相互作用。常见的formatting context有BFC（Block formatting context）和IFC（Inline formatting context）。之后在CSS3中还加入了GFC和FFC。

• BFC
  BFC全称：Block Formatting Context，中文可以翻译为：“块级格式化上下文”，它是一个独立的渲染区域，只有block-level box参与，它规定内部的block-level box如何布局，并且与这个区域外部毫不相干。

• BFC布局规则

• 内部的box会在垂直方向一个接一个地放置；
• box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠；
• 每个元素margin box左边，与包含块border box的左边相接触（对于从左向右的格式化，否则相反），即使存在浮动也是如此；
• BFC的区域不会与float box重叠；
• BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
• 计算BFC高度时，浮动元素也参与计算。

• 生成BFC

• 根元素
• float属性不为none
• position为absolute或者fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible

• BFC的应用场景举例

• 自适应两栏布局：正常情况下布局如下

bfc-1.png

根据BFC的规则——“每个元素的margin box左边与包含块border box的左边向接触，即使存在浮动也是如此”。因此虽然存在浮动元素aside，但是main的左边依然会与包含块的左边接触。
另外，根据BFC布局规则第四条——“BFC的区域不会与float box重叠”。因此可以通过将main生成BFC，来实现自适应两栏布局。

bfc-2.png

这一布局会根据块的宽度、aside的宽度自动调整宽窄。

• 清除内部浮动：正常情况下布局如下

bfc-3.png

根据BFC的规则——“计算BFC的高度时，浮动元素也参与计算”。为了清除内部浮动，可以将par设置为bfc，在计算par高度时，par内部的浮动元素child也会参与计算。

bfc-4.png

• 防止垂直margin重叠：正常情况下布局如下

bfc-5.png

两个p元素之间的距离为50px，发生了margin重叠。根据BFC规则——“Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠”。因此可以在p外面包裹一个容器，将其设置为另一个BFC，那么两个p元素就不再属于同一个BFC，不会发生margin重叠。

bfc-6.png

• 总结
  以上例子都体现了BFC布局规则的“BFC其实就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。”
  所以，学习BFC并不难，只需要牢记规则，不确定的时候，在jsbin上试一试就可以了，但是需要在实践中掌握原理。我认为无论是自适应两栏布局，还是清除内部浮动，还是防止margin重叠，其实原理无外乎是这样的：当BFC外部存在浮动时，因为它不影响BFC内部box布局，所以BFC会自己变窄，不会与浮动重叠。当BFC内部有浮动时，为了不影响外部元素布局，BFC在计算高度时会包括浮动元素的高度。同理，避免margin重叠时，因为BFC内外互不影响，所以要避免margin重叠，就将两个box放在两个BFC里面。

4. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

• 外边距合并的场景：在CSS中，两个或者多个毗邻普通流上的块级元素垂直方向上的margin会发生叠加。
• 合并示例：

margin-1.png

如图所示，.box1和.box2的margin设置为20px，.box3的margin设置为30px，但是实际上三者之间的距离为：20px, 30px，发生合并。

• 不让相邻元素外边距合并：建立BFC来避免垂直margin合并

margin-2.png

如图所示，将.box2包裹在div中，建立一个BFC

• 父子边距合并：

margin-3.png

可以看出：.father随着.son向下走了30px，而.son相对.father的位置没有变化，因为父子元素的margin-top合并了，文档流内块级元素的top与bottom边距有时会合并（塌陷）为单个外边距（合并后最大的外边距），这样的现象称为外边距塌陷。

• 父子边距合并的解决方法：给父元素添加边框、内边距、内容作为分界线，或者让父元素形成BFC

margin-4.png