高度塌陷（开启BFC）
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高度塌陷title>
<style type="text/css">
.box {
border: 1px solid red;
/*
BFC无法直接开启，需要通过一些属性来开启BFC
1.设置元素浮动可以开启BFC
2.将元素设置为行内块元素
3.可以将元素的overflow设置为一个非visible的值
通过overflow: hidden来开启BFC，从而解决高度塌陷的问题
*/
overflow: hidden;
}
.box1 {
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
/*
高度塌陷
块元素的高度默认情况下是被子元素撑开的，如果子元素浮动，将会完全脱离文档流，脱离文档流
子元素无法撑起子元素高度，将会导致父元素高度丢失，父元素一旦丢失页面则其他元素也会移动
导致布局混乱
BFC（Block Format Content）
块级格式化环境
BFC是元素的一个隐藏属性，一旦元素开启了BFC它将会开启一个独立的布局区域
这个布局区域将会具有一些特殊性质
1.开启了BFC的元素子元素的垂直外边距不会传递给父元素
2.开启了BFC的元素不会被浮动的元素所覆盖
3.开启了BFC的元素可以包含浮动的子元素
*/
}
.box2 {
width: 300px;
height: 200px;
background-color: orange;
}
style>
head>
<body>
<div class="box">
<div class="box1">div>
div>
<div class="box2">div>
body>
html>