何为css中的BFC？

最新推荐文章于 2024-09-10 10:00:00 发布

鲤鱼C c

最新推荐文章于 2024-09-10 10:00:00 发布

阅读量608

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_48643318/article/details/126444458

版权

BFC（Block Formatting Context）是CSS布局中的一个重要概念，用于创建独立的布局区域，防止元素重叠。开启BFC的方法包括设置浮动、定位、display属性等。BFC的特点包括：避免高度坍塌、内外边距不重叠、包含浮动元素等。通过开启BFC，可以解决浮动元素导致的父元素高度问题，实现两栏自适应布局。在三列布局中，BFC也能确保中间区域不与浮动元素重叠。

摘要由CSDN通过智能技术生成

BFC（Block Formatting Context)可以译为块级格式化上下文，BFC是一个css中一个隐藏的属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域，BFC内部的元素布局与外部互不影响 。

元素开启BFC后的一些特点：

1·开启BFC的元素不会被浮动元素覆盖

2·开启BFC的元素和父元素的外边距不会重叠

3·开启BFC的元素可以包含浮动的子元素

开启BFC的方式：

1·设置元素浮动

2.position（定位属性）为absolute或fixed

3.display为inline-block table-cell table-caption flex inline-flex

4.overflow不为visible　

5·将元素的overflow设置为：hidden （常用的方式），只要不是visible就行

BFC的布局规则

内部的Box会在垂直方向一个接着一个地放置。
Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
BFC的区域不会与浮动元素重叠（同级）。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动子元素也参与计算。

BFC的作用

解决浮动元素令父元素高度坍塌的问题

方法：给父元素开启BFC

如图所示只是用overflow属性开启了父元素的BFC，此时并没有发生高度坍塌问题

两栏自适应布局

方法：给固定栏设置固定宽度，给不固定栏开启BFC。

原理：BFC的区域不会与float box重叠

</head>
<style>
    .left {
      float: left;
      width: 300px;
      background-color:khaki;
    }
    .bfc {
      /* 
        overflow:auto;(隐藏溢出的内容)利用BFC
      */
      overflow: auto; 
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="left">左边定宽</div>
  <div class="bfc">右边开启BFC自适应</div>
</body>

如图所示开启BCF后右边红色区域不会与左边浮动区域重叠

三列布局：两边定宽，中间自适应

<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>
</head>
<style>
    .left {
        float: left;
        width: 400px;
        background-color: khaki;
    }

    .right {
        float: right;
        width: 400px;
        background-color: khaki;
    }

    .bfc {
        /* 
        overflow:auto;(隐藏溢出的内容)利用BFC
      */
        overflow: auto;
        background-color: red;
    }
</style>
</head>

<body>
    <div class="left">左边定宽</div>
    <div class="right">右边定宽</div>
    <div class="bfc">中间开启BFC自适应</div>
</body>