先貼一個常見的浮動代碼 父元素div設定背景色為灰色#f1f1f1，子項目div分別設定不同的顏色
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>test1</title>
<style type="text/css">
#container {
background-color: #f1f1f1;
width: 80%;
margin: 20px auto;
}
.item {
float: left;
color: white;
text-shadow:0 1px black;
margin: 10px 20px;
padding: 20px;
}
#container > .item:nth-child(1) {
background-color: #F08080;
}
#container > .item:nth-child(2) {
background-color: #D8BFD8;
}
#container > .item:nth-child(3) {
background-color: #A2CD5A;
}
#container > .item:nth-child(4) {
background-color: #63B8FF;
}
</style>
</head>
<body>
<div id="container">
<div class="item">
I am No.1
</div>
<div class="item">
I am No.2
</div>
<div class="item">
I am No.3
</div>
<div class="item">
I am No.4
</div>
</div>
</body>
</html>
這個代碼會產生如下的效果：
我們發現父元素根本沒有高度（審查元素可以看出父元素div#container的高度=0）
分析：
浮動float屬性會使得元素脫離當前HTML文檔流，那麼會使得：當前HTML文檔會當作設定float屬性的元素不存在一樣。那麼，由於這5個子項目都設定了float，所以可以看作父元素#container內根本沒有內容，div在沒內容的時候表現正好是高度=0.
解決方案：
1設定父元素float
例如：
#container {
background-color: #f1f1f1;
width: 80%;
margin: 20px auto;
float: right;
} 這樣，父元素也是脫離當前文檔流，子項目和父元素一起脫離，並且子項目仍在父元素內，父元素內容不空了，所以高度會適應子項目高度。
2在最後一個設定浮動的子項目後加一個空div ，並且讓這個div清除浮動。
例如<div class="items"></div>
.items {clear: both;}
3父元素設定overflow:hidden;
4不要用浮動，而使用：子項目使用display:inline-table或者display:inline-block
上述這些辦法得到的效果如下：
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
