css常見的布局方式，css三大布局

標準流：

css常見的布局方式，從左到右，從上到下塊級元素獨占一行，行內元素碰到父盒子邊緣換行

?

css div布局效果圖，?

浮動：

特點

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;）

?