自己对知识的理解，留作面试用，如有错误请指正
就像一个盒子，里面的东西不会影响到外面的布局
如何触发：
overflow不为visible
float不为none
position：absolute、fixed
display：inline-block
如何解决父元素塌陷： 给父元素设置BFC
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
border: 1px solid red;
overflow: hidden;//给父元素设置成BFC模式
}
.float{
float: left;
}
</style>
</head>
<body>
<div id="box1">
<div class="float">
123456
</div>
</div>
</body>
</html>
相邻外边距重叠： 给发生重叠的盒子放在BFC容器里，给他添加一个父盒子，将父盒子设置为BFC
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 300px;
height: 150px;
background-color: red;
overflow: hidden;
}
.box1{
overflow: hidden;
}
p{
margin: 10px 0;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<P>我是第一个子元素</P>
</div>
<P>我是第二个子元素</P>
<P>我是第三个子元素</P>
</div>
</body>
</html>
s
清除浮动 给非浮动元素添加BFC
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
width: 50px;
height: 50px;
background-color: red;
float: left;
}
.box2{
width: 150px;
height: 60px;
background-color: green;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
