“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第6篇文章，点击查看活动详情”

什么是BFC?

其全称为：块级格式化上下文（Block Formatting Context）它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。我的理解就是一个BFC容器是一个独立于其他外部区域的渲染区域。

当然说了这么多，可能还是有点糊涂，我们就取其精粹来谈谈：

BFC 的效果

bfc的效果：让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响

1.BFC内部的盒子会在垂直方向上一个接一个排列（bfc里面也有正常的文档流） 2.解决外边距重叠 3.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>
       ul li {
           list-style: none;
           width: 100px;
           height: 100px;
           float: left;
           background: skyblue;
       }
       
       ul {
           /* float: left; */
           position: relative;
           /* display: inline-block; */
           /* overflow: auto; */
       }
   </style>
</head>

<body>
   <div class="wrap">
       <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
       </ul>
   </div>
</body>

</html>

上面写了三个盒子，都让其浮动，此时ul就没有高度

QQ图片20220907171404.png

那么那么重点来了，让ul变成BFC容器就能让其获得高度，所以如何让某个容器变成BFC容器呢？看下面

如何创建BFC容器

浮动 float:left / right 可以将容器变为BFC
定位 position: absolute / fixed 可以将容器变为BFC
行内块 display: inline-block
表格单元 diaplay:table-cell，只要元素为table- ... 的形式都可以
overflow:auto / hidden / overlay / scroll
弹性盒子 (display:flex/inline-flex)

上面的方法都可以让某个容器变成BFC容器。

BFC容器的范围

一个BFC包含该上下文的子元素，但不包含创建了新BFC的子元素的内部元素, 即:A>B>C>D ,当A为BFC容器，A能包含B C D ，但是当C为BFC容器时A就不能作用到D容器，那么就是说一个元素不能同时存在在两个BFC里面

你一定要知道的BFC

什么是BFC?

BFC 的效果

如何创建BFC容器

BFC容器 的范围

BFC容器的范围