CSS浮动、清除浮动与BFC

2016-12-10 本文已影响722人 HungerLyndon

文章版权归饥人谷_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里面。