【面试题-CSS】什么是BFC ？如何创建 BFC ？BFC 有什么用？
创始人
2024-01-27 02:47:38
0次
一、什么是BFC （Block Formatting Context）：
BFC（块级格式化上下文）是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域指对块级元素起作用。
BFC可以让元素成为隔离独立的容器，且容器内的子元素不会影响到外面的布局。
二、BFC 有什么用：
1）防止外边距重叠
BFC导致的属于同一个BFC中的子元素的margin重叠。(Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠)
2）清除浮动的影响
块级子元素浮动，如果块级父元素没有设置高度，其会有高度塌陷的情况发生。
原因：子元素浮动后，均开启了BFC，父元素不会被子元素撑开。
解决方法：由第六条原理得，计算BFC的高度时，浮动元素也参与计算。所以只要将父容器设置为BFC，就可以把子元素包含进去：这个容器将包含浮动的子元素，它的高度将扩展到可以包含它的子元素，在这个BFC，这些元素将会回到页面的常规文档流。
3）防止文字环绕
三、如何创建BFC：
1、（子）float：left/right。
2、（子）position：absolute/fixed。
3、（子）display：inline-block；
3、（父）display：flex；
4、（父）overflow：hidden/scroll/auto；
相关内容
热门资讯
成都世运会进入倒计时30天
7月8日，成都世运会进入倒计时30天。赛会将于8月7日至8月17日在成都举行。图为成都天府广场倒计时...
小本创业平民项目 小本创业平民...
小本创业：500元起家到月入20万_创业小项目发布日期：2017-03-17来源：创业小项目作者：小...
2011年小本创业流水增涨项目...
现在什么小本生意流水增涨5个“特色小吃”项目推荐!2017年08月03日来源：渠道网现在什么小本生意...
流水增涨的小本创业2011年小...
解答一、美容美发店 美容美发业女人的“美丽产业”大有流水增涨机会。女性买菜时可能会为了一两块钱而计...
关于互联网创业 ”大学生创新创...
人家是如何做呢?先就是分析需求，目前各行各业都有培训，教各种技能的。找一个自己比较刚需的领域，我拿微...
适合白领创业的六大小本创业项万...
阅读本文前，请您先点击上面的蓝色字体“创业之坛”，再点击“关注”，这样您就可以继续免费收到最新文章了...
城镇小本创业项目有哪些？小本项...
现在创业不同于之前，投资也会少很多，不少人在外打工了几年，想要回到自己的小城镇做点小本创业的买卖，那...
现在小本创业有什么好项目 现在...
为什么穷人多不敢去创业蛋糕创业蛋糕店创业30岁现在小本创业有什么好项目女人创业做什么适合女性创业的大...
五万元小本创业好项目 五万元小...
为什么穷人多不敢去创业蛋糕创业蛋糕店创业30岁女人创业做什么适合女性创业的大学生适合什么创业毕业生如...
5万元小本生意做什么好 做点什...
如今市场上有着很多的投资小项目，而导致这些项目出现的原因自然是因为当下人们生活水平以及消费水平的迅速...