BFC容器

最新推荐文章于 2024-05-26 21:12:32 发布

仙鹤__

最新推荐文章于 2024-05-26 21:12:32 发布

阅读量76

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_52629158/article/details/129956013

版权

1.1 什么是BFC

官方定义：BFC（Block Formatting Context）块格式化上下文，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。我们经常使用到BFC，只不过不知道它是BFC而已。

1.2 如何创建BFC

常用的方式有以下几种：

浮动元素（元素的float不是 none，指定float为left或者right就可以创建BFC）
绝对定位元素（元素的 position 为 absolute 或 fixed）
display:inline-block，display:table-cell，display:flex，display:inline-flex
overflow指定除了visible的值

注意：在不知不觉中就开启了BFC，只是你不知道它是BFC而已。

1.3 BFC有什么特点

在BFC中，块级元素从顶端开始垂直地一个接一个的排列。（当然了，即便不在BFC里块级元素也会垂直排列）如果两个块级元素属于同一个BFC，它们的上下margin会重叠（或者说折叠），以较大的为准。但是如果两个块级元素分别在不同的BFC中，它们的上下边距就不会重叠了，而是两者之和。BFC的区域不会与浮动的元素区域重叠，也就是说不会与浮动盒子产生交集，而是紧贴浮动边缘。计算BFC的高度时，浮动元素也参与计算。BFC可以包含浮动元素。（利用这个特性可以清除浮动）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

拿其中一个特性：举例说明：

BFC的区域不会与浮动的元素区域重叠。我们可以利用这个特性来创建CSS中常用的两栏布局（左边宽度固定，右边宽度自适应）

(浮动元素的高度等于父元素高--当前这个父元素是一个BFC容器，如果多个浮动元素的高度一样，我们将这个高度值给父元素去使用，如果浮动元素的高度值大小不一，取大值)

<title>两栏布局，左侧固定，右侧自适应</title>
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    .left{
        width: 200px;
        height: 100px;
        background-color: lightblue;
        float:left;
    }
    .right{
        height: 100px;
        background-color: lightgreen;
        overflow:hidden;
    }
    </style>
</head>
<body>
    <div class="left">left</div>
    <div class="right">right</div>

预览：

三栏布局

左右两边固定宽度，中间不设宽，因此中间的宽度自适应，随浏览器的大小变化而变化。

<style>
    *{
        margin: 0;
        padding: 0;

    }
    .header{
        height: 120px;
        background-color: #5B5A5A;

    }
    .container{
       overflow: hidden;
       padding-left:500px;
       padding-right:150px;
    }
    .footer{
        height: 150px;
        background-color: #5B5A5A;
    }
    .container .left, .container .center, .container .right{
        height: 900px;
        float:left;
    }
    .container .left{
        width: 500px;
        margin-left:-500px;
        background-color: #63B5EC;
    }
    .container .center{
        background-color: #CEC9C9;
        width: 100%;
    }
    .container .right{
        width: 150px;
        background-color: #E76902;
        margin-right:-150px;

    }
    </style>
</head>
<body>
    <!-- 圣杯布局就是左右两边大小固定不变，中间宽度自适应。 -->
    <div class="header"></div>
    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>

预览：

拿其中一个特性：举例说明：

BFC有一个特性：当我们计算BFC容器的高度时，这个容器中的浮动元素是参与计算的，利用这个特性可以清除浮动。

    <style>
    *{
        padding: 0;
        margin: 0;
    }
    .parent{
        width: 350px;
        background-color: blue;
        margin:20px auto 0;
        /* 创建BFC */
        overflow:hidden;
    }
     /*当我们给 子元素  添加 浮动属性之后 ，这个浮动属性 给别的元素（---它的父元素）带来的影响。
            影响：我们给子元素设置浮动，那么父元素的高度就撑不开了。
            */
    .son{
        width: 150px;
        height: 150px;
        float:left;
    }
    .son1{
        background-color: green;

    }
    .son2{
        background-color: red;
        height: 300px;
    }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son son1"></div>
        <div class="son son2"></div>
    </div>

预览：

仙鹤__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC容器

(浮动元素的高度等于父元素高--当前这个父元素是一个BFC容器，如果多个浮动元素的高度一样，我们将这个高度值给父元素去使用，如果浮动元素的高度值大小不一，取大值)但是如果两个块级元素分别在不同的BFC中，它们的上下边距就不会重叠了，而是两者之和。，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。（当然了，即便不在BFC里块级元素也会垂直排列）如果两个块级元素属于同一个BFC，它们的。注意：在不知不觉中就开启了BFC，只是你不知道它是BFC而已。
复制链接

扫一扫