float最全最根本解析

前置知识

要想真正得用好浮动，以及清除浮动。必须首先要理解几个概念作为前置知识。

Normal flow （正常流）

这个名词在国内一般被翻译为文档流，这个被很多人吐槽，就不再说了。

这个正常流就是我们HTML初始的流模型。也就是整个文档内，如果你不添加其他属性（浮动和绝对定位）那么整个文档就属于正常流。

格式化上下文（formatting context）

一个格式化上下文（下文称FC）就是一系列相关的元素排布的环境。不同的FC有不同的排布规则。

正常流中的一个盒子模型，都必然属于一个格式化上下文（formatting context）（并不是每个元素都会建立一个FC，注意属于二字）。而格式化上下文又分为以下5种：

• BFC(block formatting context)
• IFC(inline formatting context)
• RFC(ruby formatting context) - 未被实现
• FFC(flex formatting context)
• GFC(grid formatting context)

值得注意的是：

1. 但是一些FC之间可以产生互动或共存，比如一个IFC可能位于一个BFC元素的内部。

2. FC建立的类型取决于inner-display。

   这里又需要介绍一下inner-display的概念。

   display属性

   实际上我们常使用的display属性，包括两个概念，inner display type和outer display type

   inner display type

   内部展示类型即会决定这个元素产生的FC的类型，由此会决定其后代元素如何进行排布。

   outer display type

   外部展示类型决定了他自己如何在流布局中进行排布。

   注意：文字没有display 属性。

下面是W3C规定的所有display属性，但是一些并没有实现：

Short display	Full display	Generated box
none	—	subtree omitted from box tree
contents	—	element replaced by contents in box tree
block	block flow	block-level block container aka block box
flow-root	block flow-root	block-level block container that establishes a new block formatting context (BFC)
inline	inline flow	inline box
inline-block	inline flow-root	inline-level block container aka inline block
run-in	run-in flow	run-in box (inline box with special box-tree-munging rules)
list-item	block flow list-item	block box with additional marker box
inline list-item	inline flow list-item	inline box with additional marker box
flex	block flex	block-level flex container
inline-flex	inline flex	inline-level flex container
grid	block grid	block-level grid container
inline-grid	inline grid	inline-level grid container
ruby	inline ruby	inline-level ruby container
block ruby	block ruby	block box containing ruby container
table	block table	block-level table wrapper box containing table grid box
inline-table	inline table	inline-level table wrapper box containing table grid box
<display-internal> types	—	layout-specific internal box

并且其分类如下：

<display-outside>  = block | inline | run-in
<display-inside>   = flow | flow-root | table | flex | grid | ruby
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<display-internal> = table-row-group | table-header-group |
                     table-footer-group | table-row | table-cell |
                     table-column-group | table-column | table-caption |
                     ruby-base | ruby-text | ruby-base-container |
                     ruby-text-container
<display-box>      = contents | none
<display-legacy>   = inline-block | inline-table | inline-flex | inline-grid

根据inner display type再回影响FC的产生原则，<display-outside>与 <display-box> 肯定不能影响规则。则剩下的几种，其内部的实现又各不相同。

首先<display-inside>必定可以产生FC。

而其他的几种，比如 table-row等由于内部的实现不同，不一定能够产生FC。

根据文档，可以归纳为：

• 产生BFC
  1. flow-chrome未实现
  2. flow-root
  3. table
  4. table-caption
  5. table-row-group
  6. table-header-group
  7. table-footer-group
  8. table-row
  9. table-cell
• 产生RFC
  1. ruby
• 产生FFC
  1. flex
• 产生GFC
  1. grid
• 产生RFC
  1. ruby（原ruby标签是用来注释的）

BFC(block formatting context)