html非標準文檔流（浮動）整理。

時間 2019-11-10

標籤 html 非標準文檔浮動整理欄目 HTML 简体版

原文原文鏈接

1、爲何須要浮動？css

塊級元素不能與任何元素標籤在同一行，行級元素雖然能夠和行級元素在同一行，可是沒法調整元素的寬高！ide

因此標準的文檔流限制太多，很是生硬，不夠靈活。spa

爲了讓行內元素有並排的效果，也要能設置寬高，因此就須要浮動。blog

2、關於浮動的性質。文檔

浮動的元素會脫離標準的文檔流!！這個很重要！it

當爲標籤設置了浮動以後，這個標籤就能夠有寬和高屬性，即便是未轉換的行內元素也能夠設置寬和高。io

一個行級標籤，不須要轉成塊級元素，就能夠設置寬度和高度！class

一旦一個元素標籤浮動了，那麼，浮動的標籤之間就能夠並排，並且能夠設置寬高，不管是行內標籤仍是塊級標籤。float

浮動的元素還會互相貼靠。im

下面有個例子，直接能夠理解下，什麼是浮動，脫標。

.box1{

float: left;

width: 300px;

height: 400px;

background-color: yellowgreen;

}

.box2{

float: left:

width: 400px;

height: 400px;

background-color: skyblue;

}

</style>

<body>

</body>

此時，兩個塊級元素並排在了一塊兒。

那麼接下來把代碼改一下：

.box1{

float: left;

width: 300px;

height: 400px;

background-color: yellowgreen;

}

.box2{

# 在這裏去掉了box2 的浮動

width: 400px;

height: 400px;

background-color: skyblue;

}

</style>

<body>

</body>

結果變成了這樣，box1直接蓋在了box2的上面，這是由於box1已經脫離了標準文檔流，box2仍是普通文檔流，在box2以前已經沒有普通的文檔流了，因此box2也會貼到最邊上。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。