薛伯一-20221017-CSS04

传统网页布局的三种方式

一、标准流

      标签按照规定好的默认顺序方式排列

1、块级元素会独占一行，从上到下顺序排列

2、行内元素会按照顺序，从左到右进行排列，碰到父元素的边缘会自动换行

二、浮动

浮动的最典型的应用：可以让多个块级元素一行内排列显示。（多个块级纵向排列找标准流，多个块级元素横向排列找浮动）

语法：float：left、right、none。

浮动的特性：

1、浮动的元素会脱离标准流（脱标）；

2、浮动元素会一行内显示并且元素顶部对齐；

3、浮动元素会具有行内块元素的特性；

4、浮动的元素不会压住下面盒子的文字内容，因为浮动的特性就是为了做到文字环绕的；

5、浮动的元素之间默认是没有空隙的。

清除浮动的方法：额外标签法（隔墙法）、给父级标签添加overflow属性、给父级添加after伪元素、父级添加双伪元素

三、定位

position:static; （静态定位）

position:relative;（相对定位）

position:absolute;（绝对定位）