谈谈BFC

最新推荐文章于 2024-07-20 21:01:09 发布

做咩呀？搬砖！

最新推荐文章于 2024-07-20 21:01:09 发布

阅读量170

点赞数 4

文章标签： css html javascript

本文链接：https://blog.csdn.net/lxs_bzdmn/article/details/118087199

版权

1.什么是BFC？

BFC通过翻译出来的中文名是：“块格式化上下文”，这玩意乍一看很高大上。实际上在翻译出来的资料里给他的定义就是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单来说，他就是一个独立区域。

2.哪些方式会创建BFC？

根元素（<html>）
元素元素（元素的float不是 none）
绝对定位元素（元素的 position为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML 表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML 表格标题默认为该值）
匿名表格单元格元素（元素的 display为（分别是HTML table、row、tbody、thead、tfoot的默认属性）或）table、table-header-group等等
display实际flow-root的元素
contain是 layout、content 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
元素元素（display为 grid 或 inline- grid元素的直接子元素）
多列容器（元素的 colcumn-count或 colcumn-width（en-US）不为 auto），包括colcumn-count1
overflow计算值(Computed)不为 visible的块元素（我们会常用 overflow: hidden）

3.BFC有哪些作用？

1.解决margin的合并问题

2.清除浮动（overflow: hidden能够清除浮动的原理就是利用的BFC）

3.做成自适应的效果（可以和display：flex做出的效果一样）

1)margin的合并效果及代码

通过上图可以发现，一二盒子之间的margin发生合并（margin值不是40px而是20px），代码如下：


<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


<body>
<div class="first">我是第一个box</div>
<div class="second">我是第二个box</div>
</body>
<style>
  div{
    width: 100px;
    height: 100px;
    color: yellow;
    background-color: purple;
    margin: 20px 0px;
  }
</style>

</html>

当你利用BFC时，例如给第二个盒子的父盒子设置overflow: hidden来创建新的BFC，这样第一个和第二个盒子就不属于用一个BFC,代码如下：


<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


<body>
<div class="first">我是第一个box</div>
<div class="only">
  <div class="second">我是第二个box</div>
</div>
</body>
<style>
  div{
    width: 100px;
    height: 100px;
    color: yellow;
    background-color: purple;
    margin: 20px 0px;
  }
  .only{
    overflow: hidden;
  }
</style>

</html>

效果图如下：

如图可见，此时margin变为40px。

2)清除浮动

效果图如下：

代码如下：


<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


<body>
<div class="createBfc">
  <div class="left">我是左边浮动的盒子</div>
  <div>我是右边内容</div>
</div>
    
</body>
<style>
.createBfc {
    background-color: yellow;
    border: 5px solid purple;
}

.left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: green;
    padding: 10px;
}  
</style>

</html>

此时，只需要给父盒子加上之前所说的创建BFC条件（如加上overflow: hidden或者加上 display：flow-root 属性的值，它可以创建无副作用的 BFC等等），这就是overflow: hidden可以清除浮动的原因。代码如下：


<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


<body>
<div class="createBfc">
  <div class="left">我是左边浮动的盒子</div>
  <div>我是右边内容</div>
</div>
    
</body>
<style>
.createBfc {
    background-color: yellow;
    border: 5px solid purple;
    display: flow-root; 
    /* 或者overflow: hidden 等*/
}

.left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: green;
    padding: 10px;
}  
</style>

</html>

效果如下：

3)自适应效果

在第二个盒子没有创建独立的BFC时，效果图如下：

代码如下：


<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


<body>
<div class="first">我是第一个box</div>
<div class="second">我是第二个box</div>
</body>
<style>
  .first{
    float: left;
    width: 100px;
    height: 100px;
    color: yellow;
    background-color: purple;
  }
  .second{
    height: 300px;
    color: red;
    background-color: green;
  }
</style>

</html>

当我们给第二个盒子创建BFC时，BFC的区域不会与浮动的盒子重叠。就可以实现自适应的效果

代码如下：


<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


<body>
<div class="first">我是第一个box</div>
<div class="second">我是第二个box</div>
</body>
<style>
  .first{
    float: left;
    width: 100px;
    height: 100px;
    color: yellow;
    background-color: purple;
  }
  .second{
    overflow: hidden;
    height: 300px;
    color: red;
    background-color: green;
  }
</style>

</html>

其实这种方式不如直接设置display：flex，左边写死右边自适应，更为舒适，代码如下：


<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


<body>
<div class="first">我是第一个box</div>
<div class="second">我是第二个box</div>
</body>
<style>
  body{
    display: flex;
  }
  .first{
    float: left;
    width: 100px;
    height: 100px;
    color: yellow;
    background-color: purple;
  }
  .second{
    height: 300px;
    width: 100%;
    color: red;
    background-color: green;
  }
</style>

</html>

总而言之，BFC就是一个独立的区域，与外界不会相互影响。