css三大布局

标准流：

从左到右，从上到下块级元素独占一行，行内元素碰到父盒子边缘换行

浮动：

特点

1 元素浮动之后不占据原来的位置（脱标），变成立体，下面可以有东西，只影响下面的

2 浮动的盒子在一行上显示

3 行内元素浮动之后转换为行内块元素（可以定义宽高）。（不推荐使用，转行内元素最好使用display: inline-block;）

作用

文本绕图：文字到图片的右边

制作导航

网页布局

清除浮动：

1 给浮动的盒子加父盒子，并且设置高度

2 额外标签法：再最后一个浮动的盒子后加 <div id="" style="clear: both;"></div>

3 给浮动的盒子的父盒子加 overflow：hidden（在解决父边框塌陷时用过）  相当于设置了父元素的高度，如果有子元素到了父元素的外面，此方法不适用

4 用伪元素清楚浮动：给父盒子加类（clearfix）推荐使用

.clearfix:after {
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}

兼容IE浏览器
.clearfix {
zoom: 1;
}

与行内块元素区别：浮动可以设置左浮动和右浮动

定位：

方向：left  right top bottom

static 静态定位

是默认值，相当于标准流

absolute 绝对定位

特点：

1 元素使用绝对定位之后不占据原来的位置（脱标）

2 元素使用绝对定位，位置是从浏览器出发。

3 嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。

4 嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。

5 给行内元素使用绝对定位之后，转换为行内块（可以设置宽高）。（不推荐使用，推荐使用display:inline-block;）

relative 相对定位

特点：

1 使用相对定位，位置从自身出发。

2 还占据原来的位置。

3 子绝父相（父元素相对定位，子元素绝对定位）（父元素占据位置，子元素随意浮动）

4 行内元素使用相对定位不能转行内块

fixed  固定定位

特点：

1 固定定位之后，不占据原来的位置（脱标）

2 元素使用固定定位之后，位置从浏览器出发。

3 元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）