css的布局规范BFC

偶尔还会想起
89 阅读3分钟

1.什么是BFC

首先来看这个BFC，英文全称为Block formatting contexts，翻译出来就是'块级格式化上下文'

简单来说就是页面上的一块渲染区域，他有自己的渲染规则，决定了内部的元素如何布局，在涉及可视化布局时，BFC提供了一个环境，html元素根据规则在其中进行布局。

再简短一点，那就是:BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响，比如我们最常见的布局规范是body。

2. BFC的布局规则

  • 1．内部的Box会在垂直方向一个接着一个地放置。
  • 2.Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin 会发生重叠。
  • 3.每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
  • 4.BFC区域不会与其他的浮动元素发生重叠
  • 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
  • 6.BFC布局下的浮动子元素也会被计算高度

3.如何将一个容器设置为BFC

根元素或属性属性值
body
floatleft,right
displayflex, inline-block
overflowhidden, auto, sroll

4.BFC可以用来解决哪些问题

  • 解决子元素浮动导致的父元素高度塌陷问题

当一个盒子没有设置高度时，放入其他的子元素会将父元素撑起来从而有高度，但如果子元素设置了浮动那么子元素将会导致父元素失去高度，此时如果将父元素变为BFC后，父元素将会重新具有高度(BFC布局下的浮动子元素也会被计算高度)

image.png

    <div class="container">
            <div class="right">右边内容栏</div>
    </div>
    .container {

    border: 3px solid red;
}
.right {
    float: left;
    width: 200px;
    height: 100px;
    background-color: rebeccapurple;
}

//  给父元素container添加即可
  .container {
    border: 3px solid red;
    overflow:hidden;
    //  display:inline-block
    //  float:left;
}
  • 解决垂直方向上外边距重叠问题

image.png image.png

当垂直方向上的两个相邻元素都添加外边距，那么外边距会重叠 
//  垂直方向上的两个元素会发生重叠问题
<div class="son1"></div>
<div class="son2"></div>
<style>
.son1 {
    width: 100px;
    height: 100px;
    background-color: blue;
    overflow: hidden;
    margin-bottom: 20px;
}
.son2 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    background-color: rebeccapurple;
}
<style>

//  将son2元素的放在一个BFC中，就不会与上方元素产生外边距重叠问题
<div class="son1"></div>
<div class="container">
    <div class="son2"></div>
</div>

<style>
.son1 {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-bottom: 20px;
}
.container {
        overflow: hidden;
}
.son2 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    background-color: rebeccapurple;
}
<style>
  • 解决了浮动覆盖问题
    当元素设置了float属性时，他会脱离标准流，导致相邻元素可能部分会被覆盖

image.png


<style scoped lang='less'>
.father {
    width: 100%;
    background-color: #ccc;
    color: white;
}
.left {
    width: 200px;
    height: 100vh;
    float: left;
    background-color: blue;
}
.right {
    width: calc(100% - 200px);
    height: 100vh;
    background-color: rebeccapurple;
}
</style>

image.png

//  将右边盒子设置为bfc即可

.right {
    width: calc(100% - 200px);
    height: 100vh;
    overflow:hidden;
    background-color: rebeccapurple;
}

5.面试真题及详解

  • 介绍一下BFC及其应用

所谓的BFC是一个独立的布局环境，其中元素按照相应的规则进行排序。

常见触发BFC的方式有

display:flex,inline-block;

float:left,right;

overflow:hidden,scroll,auto;

常见应用有

1.解决子元素浮动后父元素失去高度问题(BFC布局下的浮动元素也会计算高度)

2.解决元素浮动后脱离标准流覆盖相邻元素的问题(BFC不会和其他的浮动元素产生重叠)

3.解决垂直方向上margin值会被重叠的问题(BFC不会影响其他元素的布局)

avatar
文章
阅读
粉丝