BFC

最新推荐文章于 2023-04-19 18:01:00 发布

weixin_42182143

最新推荐文章于 2023-04-19 18:01:00 发布

阅读量112

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42182143/article/details/98542761

BFC（Block Formatting Context）即“块级格式化上下文”。通俗来说，就是一个块级元素盒子包着其他的盒子。我们平时也是这样布局的。

BFC渲染规则：

BFC元素在垂直方向上，会发生边距重叠现象
BFC的区域是不会与float 浮动元素的区域发生重叠，这个主要是用于解决清除浮动，下面会用代码讲解这个
BFC是一个独立的容器，里面不会影响外面，外面也不会影响里面
BFC元素在计算高度的时候，是会把浮动元素的高度计算进去的。

第一题规则解释：

<style>
.container {
    margin: 30px auto;
    width: 600px;
    height: 300px;
}
.p {
    border: solid 3px #a33;
    }
.c {
    width: 100px;
    height: 100px;
    background-color: #060;
    margin: 10px;
}
</style>
<body>
  <div class="container">
    <div class="p">
      <div class="c"></div>
      <div class="c"></div>
      <div class="c"></div>
    </div>
  </div>
</body>

image.png

可以看到，这里盒子的margin，数学计算应该是10+10的，而实际上bfc渲染规则使盒子上下margin重合，盒子之间的margin只有10了。

//为c添加属性
.c{
  float:left;
}

运行效果是这样的

image.png

因为使用float:left使 c 脱离了文档流，文档流元素不承认他的位置。p不会被内容 c 撑开

所以我们利用在BFC的第二点渲染规则：BFC区域是不会与浮动元素区域重叠的。把p盒子变成BFC，p就会被理想的撑开。

效果：

image.png

清除浮动

如果有办法让父元素包住子元素，那么这个区域就是BFC了，就好进行布局管理了，而这个方法就是清除浮动

(1)为父级元素增添合适的高度

(2)子级增加一个`div`,加上css属性`clear:both`

(3)父级div定义伪类:after 和 zoom

.clearfloat:after{display:block;clear:both;content:"";} 
.clearfloat{zoom:1}

IE8以上和非IE浏览器才支持:after

(4)BFC处理

设置父元素float的值不为none
设置父元素overflow的值不为visible
设置父元素display的值为inline-block、table-cell、table-caption
设置父元素position的值为absolute或fixed

BFC

BFC渲染规则：

清除浮动

(1)为父级元素增添合适的高度

(2)子级增加一个div,加上css属性clear:both

(3)父级div定义 伪类:after 和 zoom

(4)BFC处理

(2)子级增加一个`div`,加上css属性`clear:both`

(3)父级div定义伪类:after 和 zoom