<!DOCTYPE html>
<!--
高度塌陷问题：
在浮动布局中，若父元素不设置高、宽，父元素的高度默认是被种子元素撑开的
当子元素浮动后，其完全脱离文档流，子元素从文档流中脱离，将无法支撑起父元素的高度
导致父元素的的高度丢失
父元素高度丢失后会导致其下面的元素上移，导致页面布局混乱
所以高度塌陷问题是我们必须解决的问题
解决方法：
BFC（Block Fromatting Context） 块级格式化环境
BFC是CSS中的隐含的属性，可以为一个元素开启BFC，开启BFC的元素将会成为一个独立的布局区域
开启BFC后的特点：
1.开启BFC的元素不会被浮动元素覆盖 （给不想被覆盖的元素开）
2.开启BFC的元素 子元素不会和父元素外边距重叠 （给父元素开）
3.开启BFC的父元素可以包含浮动的子元素 （给父元素开）
开启BFC：
1.设置元素的浮动（float：left
;） ：不推荐
2.将元素设置为行内块元素（display：inline-block
;）：不推荐
3.微元素设置overflow为 非visible（overflow：hidden；） ：推荐
overflow的默认值为visible，
我们可以设置成scroll（带滚动条）
或者auto
或者hidden（推荐）
overflow本身是用来裁剪，防止溢出的
-->
<html lang=
"en">
<head>
<meta charset=
"UTF-8">
<title>Document</title>
<style>
.outer{
border: 2px red solid
;
overflow: hidden
;
}
.one{
width: 100px
;
height: 100px
;
background-color: springgreen
;
float: left
;
}
.two{
border: 2px red solid
;
}
.three{
width: 100px
;
height: 100px
;
background-color: springgreen
;
float: left
;
}
.four{
width: 120px
;
height: 120px
;
background-color: yellowgreen
;
}
.a{
width: 200px
;
height: 200px
;
background-color: blue
;
float: left
;
}
.b{
width: 200px
;
height: 200px
;
background-color: blueviolet
;
overflow: hidden
;
margin-left: 300px
;
}
.c{
width: 200px
;
height: 200px
;
background-color: rgb(82, 224, 82
);
}
.box1{
width:150px
;
height: 150px
;
background-color: brown
;
overflow: hidden
;
}
.box2{
width: 70px
;
height: 70px
;
background-color: burlywood
;
margin-top: 50px
;
}
.box3{
width:150px
;
height: 150px
;
background-color: brown
;
}
.box4{
width: 70px
;
height: 70px
;
background-color: burlywood
;
margin-top: 50px
;
}
</style>
</head>
<body>
<div class=
"outer">
<div class=
"one"></div>
</div>
<div>hello_Word</div><!-- 没被覆盖 -->
<br />
<br />
<br />
<br />
<br />
<div class=
"two">
<div class=
"three"></div>
</div>
<div class=
"four"></div> <!-- 被覆盖 -->
<br/>
<br/>
<br/>
<br/>
<br/>
<div class=
"a">a</div>
<div class=
"b">b</div>
<div class=
"c">c</div>
<br/>
<br/>
<br/>
<div class=
"box1">
<div class=
"box2">子元素</div>
</div>
<div class=
"box3">
<div class=
"box4">子元素</div>
</div>
</body>
</html>
