BFC
块级格式化上下文，不好理解，我们暂且把她理解成“具有特殊的一类元素”
哪些元素会生成BFC?
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
代码注释很重要
<html>
<head>
<title></title>
<style type="text/css">
.container {
/*overflow: hidden;*/
/*display:flex ;*/
height: 27px;
/*这个做法高度设置之后，虽然可以达到“包裹的目的”，但是不是真正的包裹，要不你就试一试设置height和盒子的height不同值试一试*/
/**以上达到了高度自适应的目的，包含体元素宽度依然是块元素的宽度，占据一行的宽度*/
background-color: green;
/*以下达到了高度自适应的目的，包含体元素宽度却只有包裹盒子的宽度*/
/*float: left;*/
/*position: absolute ;*/
/*position: fixed; */
/* display:inline-flex;*/
/* display:table-cell;*/
/*display:inline-block;*/
/*以下达到了高度自适应的目的，包含体元素宽度却只有包裹盒子的宽度，盒子不是水平方向排列，而是垂直方向*/
/*display:table-caption;*/
}
.container div {
float: left;
background-color: red;
margin: 20px;
}
</style>
</head>
<body>
<div class="container clearfix">
<div>Sibling</div>
<div>Sibling</div>
</div>
</body>
</html>