BFC-2

BFC是什么：

　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

　　1、内部的Box会在垂直方向，一个接一个地放置。

　　2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

　　3、每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

　　4、BFC的区域不会与float box重叠。

　　5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

　　6、计算BFC的高度时，浮动元素也参与计算

BFC怎么形成：

  • 1、float的值不是none。
  • 2、position的值不是static或者relative。
  • 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  • 4、overflow的值不是visible

BFC的作用：

1.利用BFC避免margin重叠

2.自适应两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
    }
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
    .right {
        overflow: hidden;
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }


</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

左边浮动，右边不用bfc的话，左边盒子浮动不占宽度，右边盒子继承父元素宽度占满整个盒子，加上bfc之后，右边盒子不会再与左边盒子重叠

因为右边盒子不是浮动的，所以父盒子的高度不会塌陷

3.清除浮动

当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清除浮动，给父元素加上overflow：hidden

清除浮动还可以使用

加在父元素上：
.clearfix:after{
　　display: block;
   content: "";
   height: 0;
   clear: both;
   visibility: hidden;
}

或者

在浮动的元素后面添加一个空盒子，加上clear类名： 
.clear {
    clear: both;
}

 

参考：

BFC: https://blog.csdn.net/sinat_36422236/article/details/88763187

css继承：https://www.cnblogs.com/chenshanyuanzi/p/7698867.html

posted on 2020-06-20 13:38  yemiaomiao  阅读(163)  评论(0)  编辑  收藏  举报

导航