HTML+CSS（高度塌陷和BFC）22

01

1.高度塌陷的问题：
当父元素的宽高未固定并依靠子元素撑起，当子元素设置浮动后，
导致父元素被子元素撑起的样式丢失，造成格式塌陷，下元素上移，页面混乱
2.BFC（Block Formatting Content）块级格式化环境（解决塌陷问题）
BFC是隐含属性，开启后会变成一个独立的布局区域，开启后
*不会被浮动元素所覆盖
*子元素和父元素不会重叠
*开启的父元素可以包含浮动的子元素
开启方式：
设置元素的浮动（不推荐）
将元素设置为行内块元素（不推荐）display:inline-block;
将元素的overflow设置成非默认（visible）的值如：
overflow：hidden；（常用）overflow：auto；
.box1{
border: 10px red solid;
overflow: hidden;
}
.box2{
width: 200px;
height: 200px;
background-color: seagreen;
float: left;