块级格式化上下文(BFC)对布局的影响

全称Block Formating Context,称为BFC
它是一块独立渲染区域,它规定了在该区域中,常规流块盒的布局

  • 常规流块盒在水平方向上,必须撑满包含块
  • 常规流块盒在包含块的垂直方向上依次排放
  • 常规流块盒若外边距无缝相邻则进行外边距合并
  • 常规流块盒的自动高度和摆放位置,无视浮动元素,更无视定位元素

视觉格式化上下文和块级格式化上下文的关系

视觉格式化上下文包含了块级格式化上下文,块级格式化上下文包含了以上常规流的具体规则

BFC渲染区域

这个区域由某个HTML元素创建,以下元素会在其内部创建BFC区域:

  1. 根元素 意味着< html>元素创建BFC区域,覆盖了网页的所有元素
  2. 浮动和绝对定位元素
  3. overflow不等于visible的块盒
  4. display="table";
  5. 行块盒
    创建BFC的区域
    问:元素B处于谁创建的BFC区域中?
    答:A
    元素处于谁创建的BFC关系

之前就提到BFC是一块独立的渲染区域,独立的渲染区域,它们进行渲染时互不干扰
创建BFC的元素,隔绝了它内部和外部的联系,内部的渲染不会影响到外部

  • 创建BFC的元素,它的自动高度需要计算浮动元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            background-color: lightblue;
            position: absolute;
            /* float: left; */
        }
        .item{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

设置为绝对定位和浮动虽然可以解决高度坍塌的情况,但是不要使用这种方式,因为定位和浮动改变了盒子的本身的排列方式
我们要选择副作用最小的方式:overflow
overflow:auto;
overflow:scroll; 有副作用出现滚动条
overflow:hidden; 副总用最小
**如果仅仅是解决高度坍塌,还是推荐使用清除浮动.clearfix,使用overflow的副作用:比如盒子本身就要溢出隐藏而且还要解决高度坍塌
为什么要计算高度?就是因为要隔绝内部和外部的联系

  • 创建BFC的元素,它的边框盒子不会与浮动元素重叠
    绝对定位固定定位直接不考虑浮动元素,完全无视,因为绝对定位和固定定位完全脱离常规流
    常规流元素完全忽视浮动元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .float{
            width: 200px;
            height: 200px;
            background-color: lightblue;
            float: left;
            margin: 20px;
        }
        .container{
            height: 500px;
            background-color: lightcoral;
            
        }
    </style>
</head>
<body>
    <div class="float">你好</div>
    <div class="container">常规流元素完全忽视浮动元素</div>
</body>
</html>

常规流元素完全忽视浮动元素
创建BFC后,BFC的独立渲染区域要避开浮动元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .float{
            width: 200px;
            height: 200px;
            background-color: lightblue;
            float: left;
            margin: 20px;
        }
        .container{
            height: 500px;
            background-color: lightcoral;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="float">你好</div>
    <div class="container">常规流元素完全忽视浮动元素</div>
</body>
</html>

BFC独立渲染区域要避开浮动元素
如果要改变两个盒子的间隔,要设置浮动元素的右margin,而不是BFC独立渲染区域的左margin
屎黄色区域为BFC的左margin
这样的做法有利于页面布局

  • 创建BFC的元素,不会和它的子元素进行外边距合并
    换个说法,处在不同的BFC的元素,它们的外边距是不可能合并的,只有在同一个BFC里面外边距才会合并

常规流块盒外边距合并的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            height: 400px;
            background-color: lightcyan;
            margin: 50px;
           
        }
        .child{
            height: 50px;
            background-color: lightpink;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="child"></div>
    </div>
</body>
</html>

常规流块盒父子元素外边距margin合并

在container内创建BFC后,不会出现外边距与子元素合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            height: 400px;
            background-color: lightcyan;
            margin: 50px;
            overflow: hidden;
        }
        .child{
            height: 50px;
            background-color: lightpink;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="child"></div>
    </div>
</body>
</html>

2021-03-30 19.46.31

文档信息

版权信息:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×