css浮動布局詳解

浮動布局簡介:當元素浮動以後可以向左或向右移動，直到它的外邊緣碰到包含它的框或者另外乙個浮動元素的邊框為止。元素浮動以後會脫離正常的文件流，所以文件的普通流中的框就變現的好像浮動元素不存在一樣。

區別：第乙個：就是關於橫向排序的時候，float可以設定方向而inline-block方向是固定的；

第二個：就是inline-block在使用時有時會有空白間隙的問題

最明顯的缺點就是浮動元素一旦脫離了文件流，就無法撐起父元素，會造成父級元素的高度塌陷

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
<
/head>
>
="a"
>aaaa<
/div>
="b"
>bbbb<
/div>
"clear: both;"
>
<
/div>
<
/div>
<
/body>
position: relative;
/* width: 400px; */
/* height: 400px; */
background-color:khaki;
}.a 
.b<
/style>
<
/html>

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
<
/head>
>
="a"
>aaaa<
/div>
="b"
>bbbb<
/div>
<
/div>
<
/body>
position: relative;
/* width: 400px; */
/* height: 400px; */
background-color:khaki;
overflow: hidden;
}.a 
.b<
/style>
<
/html>

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
<
/head>
>
="a"
>aaaa<
/div>
="b"
>bbbb<
/div>
<
/div>
<
/body>
position: relative;
/* width: 400px; */
/* height: 400px; */
background-color: khaki;
}.a 
.b :after 
<
/style>
<
/html>

css布局float浮動布局詳解

float屬性 頁面布局時主要採用 浮動 float 和定位 position 還有就是即不浮動也不定位的正常文件流結構三種 float屬性常用的語法是 float left right none 任何元素都可以被浮動，無論是塊元素div，ol，ul還是行內元素span strong都可以浮動，重要...

css浮動布局

float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為 文字環繞 在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被...

css浮動布局

清除浮動 形狀浮動 使用浮動可以控制相鄰元素間的排列關係。float left 向左浮動 float right 向右浮動 float none 不浮動 沒有設定浮動的塊元素是獨佔一行的。浮動是對後面元素的影響，第二個元素設定浮動對第乙個元素沒有影響。表示第乙個元素div.first of type...