什么是BFC？BFC可以解决什么问题

一、规范解释：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域

二、通俗理解：BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品

三、BFC是一个css渲染特殊的一部分，需要一定的条件才能触发

根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是 visible 的块元素

四、BFC可以解决的问题

垂直外边距重叠问题
去除浮动
自适用两列布局

1、解决外边距塌陷的问题

1）、父子元素的外边距塌陷问题

我们在一个元素内部子元素，设置了一个margin-top:20px; 结果父元素有一个具体顶部20px的距离，明显不符合我们的预期

* {margin: 0;padding: 0;}
.box {width: 400px;height: 400px;background-color: skyblue;
}.box1 {width: 100px;height: 100px;background-color: red;margin-top: 30px;
}<div class="box"><div class="box1"></div>
</div>

这样设置我们页面效果是这样的

box距离顶部有一定的距离

如果我们要解决父子元素边距塌陷问题，我们给box加上 overflow:hidden;属性

2、解决第二种兄弟元素之间外边距塌陷

两个兄弟元素设置margin:20px;按照我们想的应该两个元素相距40px才对是吧，但实际上两个元素相距20px

.box1 {width: 100px;height: 100px;background-color: red;margin: 100px;
}.box2 {width: 100px;height: 100px;background-color: blue;margin: 100px;
}<div class="box1"></div>
<div class="box2"></div>

这时就会产生外边距塌陷的问题：

这时外边距会怎么计算呢？

1.两个都是正数，取较大的值
2.两个都是负数，取绝对值较大的值
3.一正一负，取两个值得和

我们把修改下

.box1 {width: 100px;height: 100px;background-color: red;margin: 100px;
}.box2 {width: 100px;height: 100px;background-color: blue;margin: 100px;
}.box{overflow:hidden;
}<div class="box1"></div>
<div class="box"><div class="box2"></div>
</div>

这样边距就是200px了

3、自适用两列布局

.box {width: 300px;height: 400px;background-color: skyblue;
}
.box1 {float: left;width: 100px;height: 100px;background-color: red;
}
.box2 {height: 200px;background-color: blue;
}<div class="box"><div class="box1"></div><div class="box2"></div>
</div>

我们可以看到，蓝色部分被遮挡住了，也不是自动适应剩下的布局

如果我们想实现，怎么写呢

给box2加一个overflow: hidden;在来看下效果

自动适应布局

这个其实利用的就是 bfc特性bfc区域不会与float-box区域重叠

BFC当然还有一些别的用处比如利用overflow:hidden去除浮动等

什么是BFC？BFC可以解决什么问题相关推荐

CSS中的BFC BFC详解 BFC可以解决的问题汇总
CSS中的BFC BFC详解 BFC可以解决的问题汇总简介 BFC 全称 Block Formatting Context, 名为 "块级格式化上下文"它是CSS2.1规范定义的 ...
什么是BFC？可以解决什么问题？
文章目录前言一.BFC是什么? 1.定义 2. 触发BFC 二.可以解决那些问题? 1.解决外边距的塌陷问题(垂直塌陷) 2.利用BFC解决包含塌陷 3.可以利用BFC来清除浮动的影响 4. BF ...
什么是BFC，如何触发BFC,BFC的作用
BFC:块级格式化上下文理解:BFC属于普通流,相当于一块独立的渲染区域,BFC看成是元素的一种属性, 当元素拥有了BFC属性后,这个元素就可以看做成隔离了的独立容器.容器内的元素不会影响容器外的元 ...
浅谈对BFC的认识，以及用bfc解决浮动问题
我们在前端的学习过程中常常会遇到BFC,用BFC来解决一些margin塌陷.margin合并清理浮动流的问题那么问题来了,我们所说的BFC到底是个什么东西呢: 什么是BFC BFC(Block Fo ...
为什么会有BFC？BFC是什么？如何触发？BFC解决了什么问题？
前端程序员在布局页面时,经常会遇到各种烦人的小问题,比如:每个元素都是一个盒子,盒子外的父元素应该不会受到盒内子的子元素影响,可是事实是这样的吗? 往往,我们会看到子元素浮动后,父元素高度没有了,两栏 ...
css 高度塌陷和BFC,解决方法
高度塌陷问题: 在浮动布局中,父元素的高度默认是被子元素撑开的. 子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离. 将会无法撑起父元素的高度,导致父元素的高度丢失父元素高度丢失后,其下方的元 ...
CSS中块级格式化上下文（BFC）的特性与应用
一.何为BFC 块级格式化上下文(Block Formatting Context)是网页CSS视觉渲染的一部分,并用于决定盒子的布局.在定位体系中属于常规流(Normal Flow)(另外两种定位体 ...
带你十分钟了解BFC(渡一教育笔记)
文章目录 BFC简介创建BFC BFC特性结语 BFC简介它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局创建BFC BFC渲染区域: 这个区域由某个HTML元素创建,以下元素会在 ...
面试官：什么是BFC？BFC有什么特性？如何创建BFC？BFC有什么作用？
面试官:什么是BFC?BFC有什么特性?如何创建BFC?BFC有什么作用? 程序员鱼乐,全网同名,分享编程知识与生活日常.还是个小菜狗,喜欢分享知识,如有错误还请大佬们指出,欢迎大佬评论区补充知识. ...
谈谈BFC与ie特有属性hasLayout 1
最近看了一篇总结ie常见bug的文章,里面提到ie多数的bug源于她的特有属性:hasLayout.这个属性以前也了解过一点,但没有深入去理解,于是查阅了一些相关的资料,现在在此来对这个属性作一下总结 ...

什么是BFC？BFC可以解决什么问题

3、自适用两列布局

什么是BFC？BFC可以解决什么问题相关推荐

最新文章

热门文章