問題描述：
在我們讓元素浮動的時候，它就會離開原來的文檔流，將它原先占有的空間釋放。
打個比方，父元素就如一個有伸縮性的容器，而子元素就如一個氣球。當沒有設置容器的高寬時，他的高寬完全是被裝在里面的氣球撐開的，當子元素浮動時候，就像氣球從容器里飄了出來，飄在了他的上方。而此時容器也就空了，由於伸縮性，高度就變為了o，看不見了。
而我們想要父元素顯示出來，正常得被子元素撐開，怎么做呢？
代碼描述：
<style> #div1{ background-color: blank; } #div2{ width: 20%; height: 200px; background-color:red ; float: left; } #div3{ width: 20%; height: 200px; background-color: blue; float: left; } #div4{ width: 20%; height: 200px; background-color: yellow; float: left; } </style> <body> <div id="div1"> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </div> </body>
此時效果為：
此時父元素的黑色就沒有顯示出來，因為他的高度變為了0。
解決方案：
1、父元素添加高度。
#div1{
background-color: blank;
height：200px；
}
此方法可以將父元素顯示出來。
缺點：但當你調整子元素高度的時候，若你要實現父元素包含子元素的效果，你就也要調整父元素高度。
實在很麻煩！所以此方法不要用！很low！
2、父元素也添加浮動。
#div1{
background-color: black;
width: 100%;
float: left;
}
以暴制暴的方法！別人浮起來你也要跟着一起浮。
缺點：雖然可以解決問題，但是后面要添加有不需要浮動的子元素，則影響其顯示。
3、給父元素添加overflow：hidden；
#div1{
background-color: black;
overflow: hidden;
}
缺點：一旦包含非浮動的子元素，則會影響其顯示。
4、給父元素添加一個無關的元素，讓添加的無關元素去清除浮動 clean：both;
#div5{ clear:both; } </style> <body> <div id="div1"> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> <div id="div5"></div> </div> </body>
缺點：添加了一個無關元素，代碼閱讀受影響。
5、通過偽類來實現，在需要清除浮動的父元素里，添加一個清除浮動的偽類。
#div1:after{
content: "";
display: block;
clear: both;
}
推薦此方法！！！比較高級！！而且沒有以上缺點！