文档流我心里知道是什么，但是在面试时候总是表达得不清楚，这里想简单说一说文档流。

一、什么是文档流

简单地说，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。

二、三种文档流元素

  1. inline 流动方向：从左到右，到达最右才会换行
    • inline 宽度：内部 inline 元素的和，不能用 width 指定
    • inline 高度：由 line-height 间接确定，跟 height 无关，也跟 padding 无关
  2. block 流动方向：从上到下，每一个都是另起一行
    • block 宽度：默认自动计算宽度，可用 width 指定
    • block 高度：由内部文档流元素决定，可以设 height
  3. inline-block 流动方向：也是从左到右，到达最后不会把自己分成两块
    • inline-block 宽度：结合前两者特点，可用 width 指定
    • inline-block 高度：跟block类似，可以设置 height

三、脱离文档流

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

三种方式脱离文档流：

  1. float → MDN 传送门
  2. absolute → MDN 传送门
  3. fixed → MDN 传送门

四、什么是高度塌陷？

父元素只包含浮动元素，那么它的高度就会塌缩为零，一些方法可以解决，清除浮动或者创建一个 BFC。

BFC 传送门

「@浪里淘沙的小法师」