BFC的3个特性

最新推荐文章于 2023-03-29 16:04:07 发布

GaHin_

最新推荐文章于 2023-03-29 16:04:07 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/weixin_44066534/article/details/108562059

版权

1.属于同一个BFC的两个相邻Box的margin会发生折叠

问题代码如下：

<head>
    <style>    
      .box{
        width: 100px;
        height: 100px;
        border: 2px solid rgb(247, 129, 129);
        margin: 100px
      }
    </style>
</head>
<body>
  <div class="box"></div>
  <div class="box"></div>
</body>

效果：
在这里插入图片描述

问题所在：第一个div的下边距与第二个div的上边距发生了重叠，中间原本是200px的间距变成只有100px的间距。

解决方法：使两个box处于不同的BFC块中(（不同BFC不会发生折叠，开启BFC的几种方法看文章《什么是BFC、IFC、GFC、FFC？》）

<html>
  <head>
    <style>  
      .container{
        overflow: hidden;
      }
      .box{
        width: 100px;
        height: 100px;
        border: 2px solid rgb(247, 129, 129);
        margin: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

2.利用BFC清除浮动

问题代码如下：

<div style="border:1px solid black">
  <div style="width:100px;height:100px;background:burlywood;float:left;"></div>
</div>

效果：
在这里插入图片描述
问题所在：子元素浮动导致父级高度为0
解决方法：父级设置overflow开启BFC

<div style="border:1px solid black;overflow:hidden">
      <div style="width:100px;height:100px;background:burlywood;float:left;"></div>
    </div>

在这里插入图片描述

3.利用BFC阻止元素被浮动元素覆盖

问题代码如下：

<div style="width: 100px;height: 100px;background: rebeccapurple;float: left;">
	我是个浮动元素
</div>
<div style="width: 200px;height: 200px;background: burlywood;">
	我没有设置浮动，也没有触发BFC，我要被盖住了
</div>

效果：
在这里插入图片描述
解决方法：开启被覆盖元素的BFC（BFC的区域不会与浮动元素的区域重叠）

<div style="width: 100px;height: 100px;background: rebeccapurple;float: left;">
	我是个浮动元素
</div>
<div style="width: 200px;height: 200px;background: burlywood;overflow: hidden;">
	我触发了BFC
</div>

在这里插入图片描述
BFC使用场景：

1. 去除边距重叠现象

2. 清除浮动（让父元素的高度包含子浮动元素）

3. 避免某元素被浮动元素覆盖

4. 避免多列布局由于宽度计算四舍五入而自动换行

GaHin_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC的3个特性

1.属于同一个BFC的两个相邻Box的margin会发生折叠问题代码如下：<head> <style> .box{ width: 100px; height: 100px; border: 2px solid rgb(247, 129, 129); margin: 100px } </style></head><body> &
复制链接

扫一扫