BFC是什么？如何触发BFC？（实现两栏/三栏布局）

最新推荐文章于 2024-07-05 16:16:06 发布

油麦菜>

最新推荐文章于 2024-07-05 16:16:06 发布

阅读量1.3k

点赞数 2

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_56180673/article/details/127587476

版权

BFC（Block Formatting Context）是页面渲染的一种上下文，影响块级元素的布局。文章介绍了BFC的特性，如避免margin重叠，不与浮动元素重叠等。通过浮动、overflow、display等方式触发BFC，并利用这些特性解决两栏布局问题。浮动+margin、浮动+BFC和flex布局是实现两栏布局的常见方法。对于三栏布局，提到了自身浮动和绝对定位两种方案。

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

BFC是什么?

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

内部的盒子会在垂直方向上一个接一个的放置
对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

触发条件

根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed

我们可以利用BFC的特性防止margin重叠，在正常情况下相领的两个BFC盒子相遇会发什么？当然是margin进行重叠（取最大的一个做两个盒子的外边距）

解决方法：只要在包裹一个盒子重新生成一个全新BFC盒子，这样它两个就不属于同一个BFC了。

<style>
    .wrap {
   
        overflow: hidden;// 新的BFC
    }
    p {
   
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <div class="wrap">
        <p>Hehe</p >
    </div>
</body>

如何利用BFC实现两栏布局(三种方式)
浮动+margin
给左边盒子 .aside 添加一个浮动，之后再给右盒子 .main 设置一个 marign-left ，将其挤到右边去，形成左边定宽，右边自适应。
其中 margin-left 的值是盒子 .aside 的宽度

<style>
  * {
   
    margin: 0;
    padding: 0;
  }
  .aside {
   
    float: left;
    width: 200px;
    background-color: pink;
  }
  .main {
   
    margin-left: 200px;
    /* 这里不设置宽度也可以 */
    /* width: auto; */
    width: