BFC的区域不会与浮动的元素区域重叠。 我们可以利用这个特性来创建CSS中常用的两栏布局(左边宽度固定,右边宽度自适应)
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 100px;
background: green;
float: left;
}
.right{
height: 200px;
background: pink;
/* 创建BFC */
overflow: hidden;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
效果预览图: