CSS的普通流和脱离普通流

概述

普通流(Normal Flow)也常被译为标准流或者文档流,是指HTML中的文档按照默认的排布HTML元素的行为。

普通流的一般行为

分为三种元素,块级元素和行内元素,还有一种是inline-block元素。

块级元素

display默认值为block的元素。

自上而下排列,每一个元素占一行。

常见的会计元素有div,h1-h6,li等。

行内元素

自左至右,自上而下排列,占满一行换行,不可设置高宽,上下margin无效。

inline-block元素

自左至右,自上而下排列,占满一行换行,可以设置高宽,上下margin有效。

脱离浮动流

常见的脱离浮动流的方法有:浮动,绝对定位,固定定位,display:none。

参考

  1. Why Float is better than position:relative and absolute while we can make layout quickly with position? - casraf - StackOverflow