標籤：塊元素 idt 元素 分享 區塊層級元素 set html 恢複 浮動
在上一節中提到過行內塊元素（inline-block），display設定為inline-block後，
元素可以設定寬度和高度，又能以行內形式顯示，即水平排列，而不是像區塊層級元素一樣
從上到下排列。這一點很好地解決了頁面的布局問題。
inline-block不是唯一，還有一個float浮動屬性也能夠到達類似的效果。
float分為左浮left和右浮right，會讓元素脫離文檔流，且子級浮動會導致父級高度
塌陷（父級可使用overflow：hidden屬性恢複自身高度）。
下面舉例說明float實現的布局效果。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.div-all{
width: 200px;
height:200px;
background-color: grey;
}
.div-left{
width: 100px;
height:200px;
/*float: left;*/
background-color: pink;
}
.div-right{
width: 100px;
height:200px;
/*float: right;*/
background-color: coral;
}
</style>
<body>
<div class="div-all">
<div class="div-left"></div>
<div class="div-right"></div >
</div>
</body>
</html>
定義一個地區div-all用灰色表示，想要把它左右平分div-left和div-right，分別用
粉色和橘色表示，div是區塊層級元素，所以粉色地區和橘色地區垂直排列，並不能實現上
述左右平分的效果。
現在，把.div-left{}和.div-right{}中的float注釋解開，瀏覽器會得到並排平分的效果 。
這是最簡單的模型，但是以此為基礎可以做出包含更多區塊的結構，這些就能實現網頁
的布局。
CSS中的float屬性
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
