关于的BFC的详情_position relative能创建bfc吗-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_59097751/article/details/118934168

本文介绍了BFC（Block Formatting Context）的概念、创建方式及其在网页布局中的关键作用，包括避免margin重叠、实现自适应两栏布局和清除浮动。通过实例演示，深入理解BFC在前端开发中的实用价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BFC是什么

bfc是一个独立的容器，它里面的子元素不受外界的影响

如何创建bfc

1.float的值不是none

2.position的值不是static或者relative

3display的值是inline-block，table-cell，flex。table-caption或者inline-flex

4.overflow的值不是visible

BFC的作用

1.利用BFC避免margin重叠

这是margin重叠的代码

这是没有BFC的

<!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;
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
</style>
<body>
    <p>看看我的 margin是多少</p>
    <p>看看我的 margin是多少</p>
</body>
</html>

如下代码这是有BFC的

<!DOCTYPE html>
<html lang="en">
<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>
    <style>
    body{
      margin: 0;
    }
    p{
      color: cyan;
      background-color: darkorange;
      text-align: center;
        width: 200px;
      margin: 30px;  
      line-height: 100px;
    }
    div{
     overflow:auto;
   }
  </style>
</head>
<body>
    <p>略略略略略</p>
  <div>
       <p>哒哒哒哒哒哒</p> 
  </div>
</body>
</html>

2.自适应两栏布局

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

这是没有BFC的

<!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%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        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>

让right成为一个单独的BFC

<!DOCTYPE html>
<html lang="en">
<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>
    <style>
        body{
            margin: 0;
        }
        .left {
        width: 100px;
        height: 150px;
        float: left;
       background-color: darkorange;
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        height: 300px;
       background-color: deepskyblue;
        text-align: center;
        line-height: 300px;
        font-size: 40px;
       overflow:auto;
    }
    </style>
</head>
<body>
    <div class="left">left</div>
    <div class="right">
right
    </div>
</body>
</html>

3.清除浮动

当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动。

这是没有BFC的

<!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>Ducuent</title>
</head>
<style>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
    }
    
    .child {
        border: 5px solid rgb(233, 250, 84);
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

给父元素激活一个BFC

<!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>Ducuent</title>
</head>
<style>
    .par {
      border: 10px solid #ccc;
        width: 300px;
        overflow:auto;
    }
    
    .child {
      border: 5px solid #000;
        width:100px;
        height: 100px;
        float: left;
        
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

这就是BFC的作用了