<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style type="text/css">
.box1{
/* 爲box1指定邊框 */
border: 10px red solid;
/*
開啓BFC以後，有以下特性
1.父元素的垂直外邊距不會和子元素重疊
2.開啓BFC的元素不會被浮動元素覆蓋
3.開啓BFC的元素可以包含浮動的子元素
開啓方法:
1.設置元素浮動 //float: left;
-使用此方法開啓，會撐開父元素，但是會導致父元素寬度丟失
而且使用這種方法會導致下邊元素上移
2.設置元素絕對位置
3.設置元素爲inline-block //display:inline-block;
-使用此方法開啓，會撐開父元素，但是會導致父元素寬度丟失
4.將元素的overflow設置爲一個非visible
推薦方式:將overflow設置爲hidden（auto)是副作用最小的方式
*/
/* 解決高度塌陷的方法 */
overflow: hidden;
/* IE6一下 */
/* zoom:1; */
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
/*
在文檔流中，父元素高度默認被子元素撐開
也就是子元素多高，父元素多高
但是當子元素設置浮動之後，子元素會完全脫離文檔流，導致父元素高度塌陷
由於父元素高度塌陷，父元素下面元素上移，造成頁面混亂
*/
float: left;
}
.box3{
height: 100px;
background-color: rosybrown;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: teal;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: skyblue;
/*
我們希望清掉box1浮動造成的影響，我們用clear來清除浮動
clear可以用來清除其他浮動元素對當前元素的影響
可選值：
none：無操作
left:清除左側浮動元素對當前元素影響
right:清除右側浮動元素對當前元素影響
both:清除兩側浮動元素對當前元素影響
其實是清除對他影響最大元素
清除浮動，box2位置不變
*/
float: right;
}
.box3{
width: 300px;
height: 300px;
background-color: aqua;
clear: both;
}
/*
解決高度塌陷方案二
可以直接在高度塌陷父元素最後，添加一個空白div
由於這個div沒有浮動，所以它可以撐開父元素的高度
然後對他清除浮動，通過這個空白div清除浮動
*/
/* https://www.bilibili.com/video/av21557880?p=64 */
/* .box1:after{
content: "hello";
} */
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
