头图

前端内练基础-什么是BFC

THIS

前言:

在前端的基础中,CSS的BFC是一个重要的概念,也是很多大厂考察前端基础比问的一个问题,很多时候我们都是知道这个概念,但是具体是什么作用,下面请大家耐着性子看完这篇文章相信会有一些收获的。


在开始之前 我们先带着几个问题出发。

  • 什么是BFC?
  • 触发BFC的条件是什么
  • BFC能干什么?
  • 什么场景需要使用BFC

什么是BFC?

BFC的全称为块格式化上下文(Block Formatting Context,BFC)

MDN中详细的说明了BFC是Web页面中可视CSS渲染的一部分,是块盒子布局过程中发生区域,也是浮动元素与其他元素的交互区域。

是不是有些不懂?文档是写的比较官方。但是我们完全可以理解为所谓的BFC就是CSS布局的一个概念,是一个区域换句话说可以理解为一个黑盒子。BFC的内部元素布局与外部互不影响,通过一些条件来触发BFC,从而实现布局上的需求或者解决一些问题。


触发BFC的条件是什么?

说到触发的条件就不得不说道现在的文档流的模式,目前分为三大类:

普通流

其中普通流很好理解就是页面从上到下,从左到右进行排列展示,如果在块级格式化上下文中,他们是竖着排列的,反之在行内格式化上下文里面,他们是横着排列的。

image.png

浮动流

左浮动的元素尽量靠左、靠上,反之右浮动同理。

image.png

定位流

使用绝对定位和浮动定位的话都会脱离文档流,但是不会影响常规流的布局,同样也不会进行文档流占位。

image.png

触发的条件:
  • 根元素(<html>)
  • 浮动元素(元素的 float 不是 none
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 行内块元素(元素的 display 为 inline-block)
  • overflow 计算值(Computed)不为 visible 的块元素
  • display 值为 flow-root 的元素
  • 表格单元格(元素的 display 为 table-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
  • ....
    详情:MDN巴拉巴拉一大推。最好把加粗的记住比较合适。

触发的作用:
属于同一个BFC的两个相邻的容器上下的margin会重叠。且会取间距最大的值。(敲黑板,是不是面试中遇到过?)

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<style>
    .box{
        width: 100px;
        height: 100px;
        background: red;
        margin-bottom: 10px;
    }
    .box1{
        width: 100px;
        height: 100px;
        background: blue;
        margin-top: 60px;
    }
    .box1-1{
        /*overflow: hidden;*/
        /*display:flow-root;*/
    }
</style>
<body>
    <div class="box"></div>
    <div class="box1">
        <div class="box1-1"></div>
    </div>
    <script>
    </script>
</body>
</html>

image.png

原因:两个元素都属于HTML根元素,BFC的特性1规定 “属于同一个BFC的两个相邻容器的上下margin会重叠”。


计算BFC高度时浮动元素也参于计算
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<style>
    .box {
        height: 200px;
        width: 200px;
        background: #ccc;
        float: left;
        margin: 10px

    }
    .box1 {
        height: 200px;
        width: 200px;
        background: #ccc;

    }

    .container {
        background-color: red
    }
</style>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <script>
    </script>
</body>
</html>

image.png

原因:当父元素没有设置高度的时候,子元素设置的float不等于none,就会引发BFC的特性、请看第二条、父元素的高度塌陷。


BFC的区域不会与浮动容器发生重叠

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<style>
    .box {
        height: 200px;
        width: 200px;
        background: #ccc;
        float: left;

    }
    .box1 {
        height: 200px;
        background: #f7aeae;

    }

    .container {
    }
</style>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box1"></div>
    </div>
    <script>
    </script>
</body>
</html>

image.png

原因:左侧元素浮动,脱离了文档流。

统一解决

可以采用MDNflow-root属性,给父元素设置display: flow-root,一个新的 display 属性的值,它可以创建无副作用的 BFC。在父级块中使用 display: flow-root 可以创建新的 BFC。当然也要记得他的兼容

当然还有其他很多的方式,比如说overflow:hidden、display: inline-block 都可以达到清除浮动的效果,具体的实现还需要根据业务进行甄别


总结

BFC是格式化上下文的一个黑盒子是CSS布局中的一个概念方法,触发BFC有很多的方式 它可以解决:margin相互重叠浮动高度塌陷浮动元素重叠等问题,在日常的开发中可谓必不可少。

你学废了吗?


阅读 1.2k

杨老头的小书桌
平常记录项目问题的坑坑洼洼

多读书、多看报、少吃零食、多睡觉

716 声望
9 粉丝
0 条评论

多读书、多看报、少吃零食、多睡觉

716 声望
9 粉丝
文章目录
宣传栏