BFC
在 HTML 中,块级格式化上下文(Block Formatting Context,BFC)是指一个 Web 页面中的一部分,其中的元素在布局时遵循一组特定的规则。这些规则影响了元素如何放置,以及与其它元素的相互关系。具体来说 ,BFC 的作用在于创建一个独立的渲染环境,其中的元素布局不会影响到 BFC 外部的元素。
- float 的值不是 none
- position 的值是 absolute、fixed
- display 的值是 inline-block、flow-root、table-cell、table-caption、flex 或者 inline-flex、grid 或者 inline-grid
- overflow 的值不是 visible,为 auto、scroll、hidden
应用场景
- 防止 margin 塌陷
<style>
.fa {
width: 100px;
height: 100px;
background-color: antiquewhite;
margin-top: 20px;
/* border: 1px solid rebeccapurple; */
/* overflow: hidden; */
/* float: left; */
/* display: flow-root; */
/* position: absolute; */
}
.son {
width: 50px;
height: 50px;
margin-top: 40px;
background-color: darkcyan;
}
</style>
<div class="fa">
<div class="son"></div>
</div>
防止 margin 重叠
- 方法 1: 给第二个子元素添加父元素,父元素并添加
overflow: hidden;
- 方法 2: 给第二个子元素添加
float: left;
- 方法 3: 给第二个子元素添加
position: absolute;
- 方法 4: 给第二个子元素添加
display: inline-block;
- 方法 1: 给第二个子元素添加父元素,父元素并添加
清除内部浮动,解决父元素高度塌陷问题
自适应多栏布局