本文已参与「新人创作礼」活动，—起开启掘金创作之路。
BFC
定义
块级格式化上下文 (Block Formatting Context，简称：BFC)，它是页面中的一个独立的渲染区域，决定了其子元素如何布局( 不管内部元素如何进行渲染)，都不会影响到盒子外面的其他元素。
常见的FC分为：BFC、IFC、GFC、FFC (后仨了解即可)
BFC的触发条件
- 根元素
<html>； float属性的值为left、right，不为none；overflow属性值为hidden、auto、scroll，不为visible；position属性值为absolute、fixed，不为relative；display属性值为inline-block、flex、grid、table-cell、table-caption，不为none、inline、block。
BFC的特性
- 内部的盒子是在垂直方向依次放置的；
- 在垂直方向上的距离是由
margin来控制的； - 使用了
BFC的区域不会与float的区域重合，并且在计算高度时，浮动的元素也会参与计算； - 在
BFC容器中的子元素并不会影响到外边元素。
BFC的作用
- 解决外边距重叠问题 (margin塌陷)；
- 解决盒子塌陷问题；
- 清除浮动；
- 解决浮动环绕文字问题。
解决外边距重叠问题 (margin塌陷)
情况1 (两个独立盒子之间的margin)
<style>
* {
margin: 0;
padding: 0;
}
.contain {
/*
开启了BFC
决定了其子元素如何布局，不会影响到盒子外面的其他元素
*/
/* 随意哪个都可以 */
/* overflow: hidden; */
/* display: flex; */
/* display: table-cell; */
/* display: grid; */
/* 后面的需要用父盒子包裹才可以实现 */
/* position: absolute; */
float: left;
}
.top {
/* 添加一个margin的下边距 */
margin-bottom: 20px;
width: 100px;
height: 100px;
background-color: pink;
}
.bottom {
/* 添加一个margin的上边距 */
margin-top: 20px;
width: 100px;
height: 100px;
background-color: deeppink;
}
</style>
<body>
<!-- 添加了overflow: hidden;形成了一个BFC容器
内部子元素的布局，不会影响到盒子外面的其他元素 -->
<div class="contain">
<div class="top"></div>
</div>
<!--
这里是BFC容器的外面不受他盒子内部的影响
可以设置父级，也可以不设置容器
-->
<!-- <div class="bottom"></div> -->
<div class="contain">
<div class="bottom"></div>
</div>
</body>
情况2 (父子盒子之间的margin)
<style>
* {
margin: 0;
padding: 0;
}
.father {
/* 开启BFC，子盒子的布局不影响到父盒子 */
/* 随意哪个都可以 */
/* overflow: hidden; */
/* display: flex; */
/* display: table-cell; */
/* display: grid; */
/* position: absolute; */
float: left;
width: 200px;
height: 200px;
background-color: skyblue;
}
.child {
/* 添加一个margin的上边距 */
margin-top: 20px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
解决盒子塌陷问题
<style>
* {
margin: 0;
padding: 0;
}
.father {
/* 开启BFC，子盒子的布局不影响到父盒子 */
/* 随意哪个都可以 */
overflow: hidden;
/* display: flex; */
/* display: table-cell; */
/* display: grid; */
/* position: absolute; */
/* float: left; */
/* height: 100px; */
width: 100px;
border: 1px solid black;
background-color: skyblue;
}
.child {
/* 设置了之后,子盒子脱离了文档流，父盒子高度为0 */
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
清除浮动
<style>
* {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 100px;
background-color: skyblue;
}
.right {
/* 随意哪个都可以 */
/* overflow: hidden; */
/* display: flex; */
display: grid;
/* 自适应，自动充满剩余宽度 */
width: auto;
/* 绝对定位脱离了文档流，需要设置宽度为100%才行 */
/* position: absolute; */
/* 向右移动的距离就是.left盒子的宽度 */
/* left: 100px; */
/* top: 0; */
/* width: 100%; */
/* 最小高度 */
min-height: 200px;
background-color: pink;
}
</style>
<body>
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
</body>
解决浮动环绕文字问题
<style>
* {
margin: 0;
padding: 0;
}
.contain {
width: 200px;
border: 1px solid black;
}
.box {
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
p {
/* 随意哪个都可以 */
/* overflow: hidden; */
/* display: flex; */
/* display: table; */
display: grid;
}
</style>
<body>
<div class="contain">
<div class="box"></div>
<p>解决浮动环绕文字问题；解决浮动环绕文字问题；解决浮动环绕文字问题；解决浮动环绕文字问题；解决浮动环绕文字问题；解决浮动环绕文字问题</p>
</div>
</body>
