BFC原理与应用：解决CSS布局问题-优快云博客

本文链接：https://blog.youkuaiyun.com/sj18153976311/article/details/130185140

BFC:块级格式化上下文

页面中的一个渲染区域
开启条件
1. 根元素
2. 脱离文档流的元素（浮动、定位）
3. 非块元素：(display：inline-block；table;flex)
4. overflow属性值不为visible的值。

BFC特性：

开启BFC的元素，父元素的垂直外边距不会和子元素重叠；

解决外边距传递和外边距重叠问题。

解决外边距传递问题：
.outer {
            width: 200px;
            height: 200px;
            background-color: gray;

            /* 开启BFC */
            overflow: hidden;
        }

        .inner {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body

/*
           知识点：
               - BFC解决外边距重叠
           描述：
               - 特性
                   1、父元素的垂直外边距不会和子元素重叠
  
                   outer和top隔开margin，而bottom和outer兄弟关系，则top和bottom就会隔开
  
               - 开启BFC
                   4、设置overflow属性为非visible

      */
      .top {
          width: 200px;
          height: 200px;
          background-color: red;
          margin-bottom: 100px;
      }
  
      .bottom {
          width: 200px;
          height: 200px;
          background-color: yellow;
          margin-top: 100px;
      }
  
      .outer {
          overflow: hidden;
      }
  </style>

</head>

  <div class="bottom"></div>

</body>

开启BFC的元素，不会被浮动元素覆盖；

解决元素覆盖的问题。

解决元素覆盖问题：
.top {
            width: 200px;
            height: 200px;
            background-color: rebeccapurple;
            float: left;
        }

        .bottom {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 开启BFC */
            /* float: left; */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>

开启BFC的父元素，可以包含浮动元素；

解决父元素高度塌陷问题。

解决元素高度塌陷的问题
.outer {
            border: 1px solid black;

            /* 开启BFC */
           overflow: hidden;
        }

       .inner {
          width: 200px;
          height: 200px;
          background-color: red;

          float: left;
       } 

       

    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>