复习css布局模型

css布局模型

浏览器从服务器读取数据，保持页面元素的原始顺序，是一个顺序，然后按照文档流的顺序进行解析；

css布局模型有：流动模型flow、浮动模型float、层模型layer；

流动模型：

流动模型基于标准文档流进行布局，除了绝对定位、固定定位之外、浮动之外，任何元素都将默认为流动布局模式；

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

在内联模型下，内联元素都会在所处的元素内从左到右水平分布显示；

浮动模型：

任何浮动元素都会自动被设为block元素显示，在水平方向，停靠在包含元素的边缘，浮动元素不会脱离文档流，始终位于包含元素内部；（但是绝对定位是能够脱离文档流）



浮动塌陷：

当父元素，只包含浮动元素时候，高度塌陷为0

层模型: