css 块级格式化上下文(BFC)

情到浓时终转凉″ 提交于 2019-12-04 18:50:33

一、块级格式化上下文(BFC)

1、什么是块级格式化上下文?

    Block Formatting Contexts (BFC,块级格式化上下文)就是一个块级元素 的渲染显示规则
  (可以把 BFC 理解为一个封闭的大箱子,,容器里面的子元素不会影响到外面的元素)

2、触发BFC的条件如下:

  • 根元素
  • float的值不为none。
  • overflow 除了 visible 以外的值(hidden,auto,scroll)
  • display的值为table-cell, table-caption, inline-block中的任何一个。
  • 绝对定位元素:position (absolute、fixed)
  • 弹性盒 flex boxes (元素的 display: flex 或 inline-flex)

3、BFC 的布局规则:

  • 内部的盒子会在垂直方向,一个个地放置;
  • BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
  • 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ;
  • 计算BFC的高度时,浮动元素也参与计算
  • 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此;
  • BFC的区域不会与float重叠;

4、BFC特性

1.同一BFC下外边距会发生折叠:

代码如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>外边距折叠</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
            height:500px;
            margin:0 auto;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            margin:100px;
        }
        .btm2{
            width:100px;
            height:100px;
            background-color:red;
            margin:100px ;
        }
    </style>
    
</head>
<body>
    <div class="box">
    
        <div class="btm1">上下100margin</div>
        
        <div class="btm2">上下100margin</div>
    
    </div>
</body>
</html>

效果图:

第一个div的下边距和第二个div的上边距发声了重叠,所以两个盒子之间距离只有100px,而不是200px。

解决方法:

  • 放在不同的BFC下

代码如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>外边距折叠</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
            height:500px;
            margin:0 auto;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            margin:100px;
        }
        .btm2{
            width:100px;
            height:100px;
            background-color:red;
            margin:100px ;
        }
        .container{
            overflow: hidden;
        }
    </style>
    
</head>
<body>
    <div class="box">
        <div class="container">
            <div class="btm1">上下100margin</div>
        <div>
        <div class="container">
            <div class="btm2">上下100margin</div>
        <div>
    </div>
</body>
</html>

效果图:

这次我们可以清晰的看清两个中间是200px;并没用重叠。

2、BFC可以包含浮动的元素(清除浮动)

代码如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>高度塌陷</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
        
            margin:0 auto;
            border:1px solid green;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            float:left;
        }
        .btm2{
            background-color:red;

        }
    
    </style>
    
</head>
<body>
    <div class="box">

            <div class="btm1">浮动</div>

        
            <div class="btm2"></div>
    
    </div>
</body>
</html>

效果图:

由于容器内元素浮动,脱离了文档流,所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC,那么容器将会包裹着浮动元素。

代码如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>高度塌陷</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
            overflow:hidden;
            margin:0 auto;
            border:1px solid green;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            float:left;
        }
        .btm2{
            background-color:red;

        }
    
    </style>
    
</head>
<body>
    <div class="box">

            <div class="btm1">浮动</div>

        
            <div class="btm2"></div>
    
    </div>
</body>
</html>

3、侵占浮动元素的问题

代码如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>高度塌陷</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
            overflow:hidden;
            margin:0 auto;
            border:1px solid green;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            float:left;
        }
        .btm2{
            width:300px;
            height:300px;
            background-color:red;
            
        }
        
    </style>
    
</head>
<body>
    <div class="box">

            <div class="btm1">浮动</div>
    

            
        
            <div class="btm2">
            
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!

            </div>

    
    </div>
</body>
</html>

效果图:

解决方法:
通过触发btm2的BFC解决
代码如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>高度塌陷</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
            overflow:hidden;
            margin:0 auto;
            border:1px solid green;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            float:left;
        }
        .btm2{
            width:300px;
            height:300px;
            background-color:red;
            
        }
        .bb{
            overflow:hidden
        }
    </style>
    
</head>
<body>
    <div class="box">

            <div class="btm1">浮动</div>
    
    
        <div class="bb">
            
        
            <div class="btm2">
            
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!
            欢迎大家观看!

            </div>
        </div>
    
    </div>
</body>
</html>

效果图:

持续更新,欢迎大家指教!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!