问题描述：
在我们让元素浮动的时候，它就会离开原来的文档流，将它原先占有的空间释放。
打个比方，父元素就如一个有伸缩性的容器，而子元素就如一个气球。当没有设置容器的高宽时，他的高宽完全是被装在里面的气球撑开的，当子元素浮动时候，就像气球从容器里飘了出来，飘在了他的上方。而此时容器也就空了，由于伸缩性，高度就变为了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;
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;
}
推荐此方法！！！比较高级！！而且没有以上缺点！