css布局模型
浏览器从服务器读取数据,保持页面元素的原始顺序,是一个顺序,然后按照文档流的顺序进行解析;
css布局模型有:流动模型flow、浮动模型float、层模型layer;
流动模型:
流动模型基于标准文档流进行布局,除了绝对定位、固定定位之外、浮动之外,任何元素都将默认为流动布局模式;
- 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
在内联模型下,内联元素都会在所处的元素内从左到右水平分布显示;
浮动模型:
任何浮动元素都会自动被设为block元素显示,在水平方向,停靠在包含元素的边缘,浮动元素不会脱离文档流,始终位于包含元素内部;(但是绝对定位是能够脱离文档流)
浮动塌陷:
当父元素,只包含浮动元素时候,高度塌陷为0