阅读 54

BFC

创建了一块互不干扰的空间,外面的不会干扰到里面的,里面也不会干扰到外边的,

主要应用场景,外边距合并、清除浮动、两栏自适应

BFC布局规则

触发bfc的元素不会干扰外部的布局方式,外部也不会干扰到bfc内部,是一个独立的空间

  • 内部的box会在垂直方向一个接着一个排列
  • 同一个bfc的两个相邻box的margin会发生重叠
  • bfc容器里的元素,都会与包含块(也就是容器)border的左边接触(对于从左往右的格式化,如果是从右往左的格式化就与右边接触),即使存在浮动的元素也是如此。
  • bfc的区域不会与float box重叠
  • bfc是页面上一个隔离的独立容器,容器里的子元素不会影响到外面的元素,反之如此
  • 计算bfc的高度时,浮动的元素也参与其中

哪些元素会生成BFC

  • 根元素 html
  • float属性不为none
  • positionabsolutefixed
  • displayinline-blocktable-celltable-captionflexinline-flex
  • overflow不为visible

BFC的作用及原理

自适应两栏布局

假设有两栏asidemain,把aside浮动到左侧,这时候aside就脱离了文档流,main元素根据bfc布局的第三条原则,会紧贴着容器的左侧排列(body是跟,跟本身就是一个BFC),所以最终渲染的效果,

main元素会为顶到之前aside的位置,导致了main元素被盖在了aside的底部

image-20211024091731612.png

<style>
    body {
        width: 300px;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>
复制代码

根据BFC布局的第四条规则,bfc区域不会与浮动的元素重叠,所以可以将main元素变成一个BFC快,实现自适应两栏布局

.main {
    overflow: hidden;
}
复制代码

image-20211024092148468.png

清除内部浮动

根据BFC的第六条布局规则,计算BFC的高度时,浮动的元素也会参与计算,所以可以根据这条特性,解决子元素浮动,父元素高度塌陷问题。如下图,当父元素parent不是bfc块时,内部的child浮动后,导致了自己高度的塌陷

image-20211024092148468.png

<style>
    .parent {
        border: 5px solid #fcc;
        width: 300px;
    }

    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
复制代码

当将父元素parent变为bfc块时,根据特性,浮动元素参加高度计算,变相的清除了浮动

.par {
    overflow: hidden;
}
复制代码

image-20211024092148468.png

防止外边距合并

同一个bfc块下,毗邻的两个元素的外边距会发生合并,如下有两个box块,最后发生外边距合并后,两个box相差了30px

image-20211024092148468.png

<style>
    .box {
        margin: 20px 0 30px;
        background-color: green;
        width: 100px;
        height: 100px;
    }
</style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
</body>
复制代码

如何避免合并呢,让两个box不处于同一个bfc块下就好了,在第二个box加一个包裹wrapper,让wrapper变成一个bfc,那么两个box就处于两个bfc下了,就避免了外边距合并,代码改造如下

<style>
    .box {
        margin: 20px 0 30px;
        background-color: green;
        width: 100px;
        height: 100px;
    }
    .wrapper {
        overflow: hidden;
    }
</style>
</head>
<body>
    <div class="box"></div>
    <div class="wrapper">
        <div class="box"></div>
    </div>
</body>
复制代码

image-20211024092148468.png

总结

上述的所有例子都体现了BFC的第五条规则,bfc是一个独立的容器,里面和外面互不影响。

因为BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

参考:

www.cnblogs.com/lhb25/p/ins…

文章分类
前端
文章标签