认识BFC

最新推荐文章于 2024-09-11 20:31:47 发布

逍康

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量110

点赞数

分类专栏： sass/css 文章标签： css html html5

本文链接：https://blog.csdn.net/lsk222/article/details/104477106

版权

sass/css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

学习一门技术应该更多的关注原理和应用，应该知其然更要知其所以然。

本篇文章将说明什么是bfc，如何触发bfc以及bfc的应用

什么是BFC：

bfc(block fomating context) 块级格式化上下文，它是一块独立的渲染区域

规则：

1、bfc的元素从上至下排列

2、在bfc内部，垂直方向上的margin会发生重叠，按照较大值计算

3、计算bfc高度的时候会包括浮动元素的高

4、bfc区域不会和浮动的元素重叠

5、每个元素的margin box的左边，与包含块border box的左边相接触

6、bfc是一个独立的区域，区域内部的元素不会影响到外部的元素

如何触发BFC：

1、html根标签

2、overflow：visible属性除外

3、float：none除外

4、position：absolute或者fixed

5、display ：inline-block, table-cell, table-caption, flex, inline-flex

bfc常见的应用：

1、外边距重叠

我们知道父子元素嵌套时，对子元素设置margin-top时会使父元素跟着下移。解决这个问题，可以给父元素

设置overflow：hidden 我们先来看看不触发bfc的效果

 <style>
        .box{
            width: 400px;
            height: 400px;
            background-color: blue;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: brown;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">

        </div>
    </div>

我们可以明显的看出父元素也随之下移了

加上overflow：hidden之后很明显父元素没有随之移动

2、双飞翼布局（两侧宽度固定，中间区域随着浏览器大小变化而变化）

利用bfc区域不与float元素发生重叠的特点实现此布局，不过要注意的是中间区域要写在两侧浮动区域的下面，不能按照顺序写

否则会把右边浮动的元素挤到下面去

<style>
        * {
            padding: 0;
            border: 0;
        }
        html,
        body {
            height: 100%;
        }
        .box {
            height: 100%;
        }
        .box-left {
            width: 200px;
            height: 100%;
            background-color: orchid;
            float: left;
        }
        .box-center {
            height: 100%;
            background-color: blue;
        }
        .box-right {
            width: 300px;
            height: 100%;
            background-color: red;
            float: right;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-left">

        </div>
        <div class="box-right">

        </div>
        <div class="box-center"> //要写在左右元素的下面，否则会将右边的元素挤下去

        </div>

    </div>
</body>

效果如下：