<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>高度塌陷最終解決方案</title>
<style>
.box1{
border:solid tomato 10px;
}
.box2{
width: 200px;
height: 200px;
background-color: violet;css
/* 當咱們設置浮動後，高度塌陷了。
咱們分析，若是給 box1 中手動添加一個元素box3，（此時在文檔流中）會撐起父元素的高度,咱們把Box3的浮動影響清除便可.
這樣能夠解決問題，可是咱們手動添加了這樣一個box3 形成頁面佈局增長了(不推薦)。
此時咱們能夠考慮，使用css樣式的僞元素選擇器，在咱們的box1最後加上一個（塊元素），使之在文檔流中，並清除浮動元素對它的影響，那麼咱們就
能夠解決問題.
*/
float:left;
}html
/* 解決高度塌陷最終方案 */
.box1::after{
content: '';
clear: both;
/* 必定要將它變成塊元素，行內元素沒法撐起高度 */
display: block;
}佈局
.box3{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<!-- <div class="box3"></div> -->
</div>
</body>
</html>htm