在文檔流中，父元素的高度默認是被子元素撐開的
當爲子元素設置浮動後，子元素會完全脫離文檔流
此時會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷
由於父元素的高度塌陷了，則父元素下的所有元素都會向上移動， 導致頁面佈局混亂
所以在開發中需要避免出現高度塌陷的問題
如何開啓元素的BFC
1.設置元素浮動
-使用這種方式開啓，雖然可以撐開父元素，但是會導致父元素的寬度丟失，
而且使用這種方式也會導致下邊的元素上移，不能解決
2.設置元素絕對定位
3.設置元素爲inline-block
-可以解決問題，但是會導致寬度丟失，不推薦使用
4.將元素的overflow設置爲一個非visible的值
.box1{
/* 爲box1設置一個邊框 */
border: 10px red solid;
/*
zoom只在IE中支持，其他瀏覽器不支持
*/
zoom: 1;
overflow:hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
clear可以用來清除其他元素浮動對當前元素的影響
可選值：
none，默認值，不清除浮動
left，清除左側元素對當前元素的影響
right，清除右側
both,清除兩側元素對當前元素的影響
清除對他影響對最大的那個元素的浮動
解決高度塌陷方案二：
可以直接在高度塌陷的父元素的最後，添加一個空白的div
由於這個div沒有浮動，所以是可以撐開父元素的高度的
然後再進行清除浮動，可以通過這個空白的div來撐開父元素的高度
基本沒有副作用
這種方式雖然可以解決問題，但是會在頁面中添加多餘的結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div>
</body>
</html>
最優解決方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*
可以通過after僞類向元素的最後添加一個空白的塊元素，然後對其清除浮動
*/
.clearfix:after{
/* 添加一個內容 */
content: "";
/* 轉換爲一個塊元素 */
display: block;
/* 清除兩側浮動 */
clear: both;
}
/* 在IE6中不支持after僞類
所以在IE6中還需要使用haslayout來處理 */
.clearfix{
zoom: 1;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
<div class="clear"></div>
</div>
</body>
</html>