normal-flow & BFC & float

http://www.ituring.com.cn/article/198258 文档流与定位问题
https://www.w3.org/TR/CSS2/visuren.html#normal-flow W3C normal-flow官方文档

文档流

所谓的文档流实际上是一种民间说法,正常称谓应该指的是常规流(normal flow)。从直观上理解正常流指的是元素按照其在HTML 中的位置顺序决定排布的过程,主要的形式是自上而下,一行接一行,每一行从左至右。

CSS2.1 规范: 定位方案(Positioning Schemes)一共分三种:

  • 常规流,也就是俗称的文档流,又包含三种类型:块级元素的块级格式、行内元素的行内格式以及两种元素的相对定位方式。
  • 浮动(Float)
  • 绝对定位(Absolute Positioning):包含 absulote 和 fix 两种

由此我们就知道,所谓的不脱离文档流就只有三种情况:块级、行内和相对定位。由此上面遇到的第一个问题也就得以证实:相对定位是不脱离文档流的。

position: static | absolute | fixed | relative

BFC

https://www.w3.org/TR/CSS2/visuren.html#block-formatting BFC官方文档
http://www.html-js.com/article/1866 BFC文档的简单翻译 · 实践 值的一看
http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html 深入理解BFC

BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。
BFC就是“块级格式化上下文”的意思,创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。

BFC特性:

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

触发BFC:

  • float 除了none以外的值
  • overflow 除了visible 以外的值(hidden,auto,scroll )
  • display (table-cell,table-caption,inline-block, flex, inline-flex)
  • position值为(absolute,fixed)
  • fieldset元素

BFC应用

最多是使用overflow出发BFC,

用来解决:

  1. margin叠加问题
  2. 清除浮动,避免塌陷
  3. 有浮动时,布局,BFC的区域不会与float box叠加

主要是利用BFC的特性,再触发BFC,用来解决问题。

流体特性

定义: 块状水平元素,如div元素(下同),在默认情况下(非浮动、绝对定位等),水平方向会自动填满外部的容器

inline-block的间距问题

使用inline-block时 有间距:

  1. margin:-4px
  2. font-size:0