BFC(块级格式化上下文)
BFC 是什么
BFC 是一个独立的布局环境,它外部的元素布局与外界互不影响。
产生了 BFC 的元素内的布局环境:
- 计算该元素的高度时, 浮动子元素的高度也参加计算
- BFC 区域不会与非该区域内的浮动元素重叠
- 创立 BFC 的元素不会与它的子元素进行外边距合并, 即:处于不同 BFC 区域的元素之间不会产生外边距合并。
造成 BFC 的条件
BFC 渲染区域由某个 HTML 元素创立, 以下元素会创立:
- 根元素(html 元素)
- 浮动、相对与固定定位元素
- overflow 不等于 visible 的块盒
- display 为 inline-block、table-cell、table-caption、flex 的元素
1、个别状况下,在计算元素高度不会将其子元素中的浮动元素计算在内:
<style>
* {
margin: 0;
padding: 0;
}
.main {border: 1px solid red;}
.left {
width: 30px;
height: 30px;
float: left;
margin: 0 10px;
background: #008c8c;
text-align: center;
line-height: 30px;
}
</style>
<body>
<div class="main">
<div class="left">1</div>
<div class="left">2</div>
<div class="left">3</div>
<div class="left">4</div>
</div>
</body>
显示成果如下:
咱们通过设置 main 元素 overflow:hidden 让其产生 BFC 区域:
<style>
* {
margin: 0;
padding: 0;
}
.main {
border: 1px solid red;
overflow: hidden;
}
.left {
width: 100px;
height: 100px;
float: left;
margin: 0 10px;
background: #008c8c;
text-align: center;
line-height: 100px;
}
</style>
<body>
<div class="main">
<div class="left">1</div>
<div class="left">2</div>
<div class="left">3</div>
<div class="left">4</div>
</div>
</body>
失去的成果为:
2、个别状况下, 惯例流块盒在排列时会疏忽浮动元素,导致被浮动元素被笼罩,例如:
<style>
* {
margin: 0;
padding: 0;
}
.item1 {
width: 100px;
height: 100px;
float: left;
background: blue;
}
.item2 {
height: 200px;
background: red;
}
</style>
<body>
<div class="item1"></div>
<div class="item2"></div>
</body>
成果如下:
通过设置 item2 元素的 overflow:hidden 让其产生 BFC 区域
<style>
* {
margin: 0;
padding: 0;
}
.item1 {
width: 100px;
height: 100px;
float: left;
background: blue;
}
.item2 {
height: 200px;
background: red;
overflow:hidden;
}
</style>
<body>
<div class="item1"></div>
<div class="item2"></div>
</body>
item2 在排列的时候避开了浮动元素 item1,成果如下:
3、在有时候咱们会发现,父子元素之间产生了外边距合并:
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 300px;
height: 300px;
background: red;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
.children {
width: 100px;
height: 100px;
background: blue;
margin-top: 10px;
}
</style>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
成果如下:
咱们通过设置 parent 元素的 overflow:hidden 使其产生 BFC 区域
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 300px;
height: 300px;
background: red;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
overflow:hidden;
}
.children {
width: 100px;
height: 100px;
background: blue;
margin-top: 10px;
}
</style>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
成果如下:
以上这三种状况是 BFC 常见的利用:
- 解决浮动元素令父元素高度坍塌问题
- 解决非浮动元素被浮动元素笼罩的问题
- 解决外边距合并的问题