扯淡BFC - 地震的故事

BFC算是css基础知识中比较抽象的一个知识点。
BFC的全称是 Block Format Content，块级元素格式化上下文。

在W3官网的解释是这样的：
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

嗯，就算看懂了这段英语还是很抽象。
下面进入正题，我来讲个故事吧。

在古老的地球上生活着人类（块级元素）和动物（行内元素）。

人类作为高级动物有着独特的优势，他们有着强大的可塑性（可随意设置宽高）和适应性（随意设置内外边距）。

飞禽走兽们虽然和人类一样都是动物，却没有人类的智慧和适应性。
（行内元素不能设置宽高、垂直方向的内外边距也无效）

所以一些飞禽走兽，比如猫、狗、猪、羊开始被人类统治、圈养。
（块级元素可独自占据一行，而行内元素却不能。在布局时通常行内元素span，a，input 等被块级元素包裹着）

有一天，天边的云彩渐渐发生了异变。
（父元素下一些元素具有了浮动属性后，脱离了普通流或又称文档流。）

人类虽有智慧却不能感知这异变，而动物们却早已明白地震将要来临，随即开始叫唤、奔跑了起来。
（块级元素不能感知浮动元素。而行内元素不但可以感知浮动元素，还会发生位移。）

地震开始了，不能即时察觉这异变的人类伤亡惨重。动物们却幸免于难。
（普通的块级元素会被浮动元素所覆盖，行内元素则不会被覆盖。）

不过仍然有人类存活了下来。
他们中有人健步如飞，
有人眼瞎但对声波敏感，
有人常年居住在山顶、湖中，
有人天生有着动物般的直觉。
他们就是异者。
（ 具有以下特性的块级元素可以清除浮动：
float为 left|right
overflow为 hidden|auto|scroll
position为 absolute|fixed
display为 table-cell|table-caption|inline-block
这些块级元素形成了BFC）

有些普通人也想预测地震等灾害，于是去效仿异者。
但也付出了代价，
有的被种族视为异类并遗弃（float脱离文档流），
有的永远失去了眼睛（overflow:hidden会看不到超出边框的内容），
有的在偏远处孤独终老（absolute脱离文档流），
有的变得不人不兽（inline-block...）。
（为了消除浮动形成BFC，那些添加的属性就像是副作用。
还是要综合考虑，尽量顺带去形成BFC。比如元素正好要float就正好形成了BFC。）

有些聪明的普通人借助科技，他们制作了仪器来感知灾害、避免伤亡。
（为了把副作用减少到最少，
通用的清理浮动法案是用伪元素的方法：

xxxx:after{
      content:"";
      display:block;
      clear:both;
}
/*或者*/
xxxx:after{
    content:"";
      display:table;
      clear:both;
  }

）

其他人类也觉得科技确实造福于人啊，于是开始大力发展科技，过上了幸福的生活。

嗯，编不下去了。

希望对你学习BFC有用喽。^_

之后再写一篇正式版来梳理吧。
more : CSS深入理解流体特性和BFC特性下多栏自适应布局

本博客版权归 Llane00 ，转载需说明来源