10分钟了解什么是BFC
BFC对于已经是一个耳熟能详的词汇了,而且在前端面试中,这题也是一个高频题。虽然我们平时在开发的时候知道如何利用BFC来解决问题,但是我们要具体说出BFC的概念和怎么触发BFC,我相信很多小伙伴也是和我一样不知道的
什么是BFC?
块级格式化上下文,W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部
怎么触发BFC?
只要元素满足下面任一条件即可触发 BFC 特性:
浮动元素:float值除none以外的值
绝对定位元素:position为absolute或fixed
display为inline-block、table-cell、flex、inline-flex、table-caption
overflow除了visible以外的值(hidden、auto、scroll)
- body根元素
BFC的渲染规则
1. 同一个BFC下垂直方向上相邻的两个box的外边距(margin)会发生重叠
从效果上看的话,两个p元素都处于同一个BFC容器中,所以第一个p元素的下边距会和第二个p元素的上边距重合。重合之后,最终显示的边距是取最大的那个值,也就是25px。所以两个p元素之间的边距值是25px,标准的应该是30px才对。
<section id="margin">
<style>
#margin{
background:pink;
overflow:hidden; }
#margin p{
margin:5px auto 25px;
background:red;
}
</style>
<p>1</p>
<p>2</p>
</section>
这其实不是css的bug,我们可以将其理解为是一种规范。如果我们想要避免外边距重叠的话,根据同一个BFC容器下面的元素才会发生折叠的原理,我们可以将他们放在不同的BFC容器中
解决方法:
将发生重叠的盒子放在另外一个BFC容器中,即添加一个父盒子,将该盒子设置为BFC容器
<section id="margin">
<style>
#margin{
background:pink;
overflow:hidden; }
#margin p{
margin:5px auto 25px;
background:red;
}
</style>
<p>1</p>
<div style="overflow: hidden">
<p>2</p>
</div>
<p>3</p>
</section>
2. BFC可以包含浮动的元素
我们都知道,浮动的元素都会脱离文档流,我们来看一下下面的例子
<section id="layout">
<style>
#layout{
background:red; }
#layout .left{
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right{
height: 110px;
background: green;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
效果图:
通过这个图我们可以看出,右侧的盒子因为高度比左边的高之后,因为BFC的缘故,就延申到它的左侧去了。这个例子我们做前端的应该是经常遇到的,很多人知道应该怎么解决,但是却不知道它的原理,这是因为BFC的缘故
解决方法:
给右侧的盒子设置为BFC容器,添加overflow属性,注意overflow不能为visible
<section id="layout">
<style>
#layout{
background:red; }
#layout .left{
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right{
height: 110px;
background: green;
overflow: auto;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
3.计算BFC高度时,浮动元素也参与计算
下面我给大家举一个非常常见的例子:
<section id="float">
<style>
#float {
background: red;
} #float .float {
float: left;
font-size: 30px;
}
</style>
<div class="float">我是浮动元素</div>
</section>
相信大家在开发的时候肯定有遇到过这个,子元素浮动之后,子元素的高度没有算到父元素上面,导致父元素的高度为0
解决方法:
给父元素设置为BFC,添加overflow:hidden属性
<section id="float">
<style>
#float {
background: red;
overflow: hidden;
} #float .float {
float: left;
font-size: 30px;
}
</style>
<div class="float">我是浮动元素</div>
</section>
4 . BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此
例子在2,3里面有体现
最新文章
- C#和.net的版本
- IE8和W3C标准下IFRAME刷新和URL的区别
- LNK2005 连接错误解决办法
- go 应用程序性能测试
- java代码调用rtx发送提醒消息
- hdu 4464 水
- 反向代理-- WEB服务的加速器[转]
- ural1752 Tree 2
- echarts中如何使用timeline组件
- CF1037E. Trips
- 原生js封装插件
- 使用js冒泡实现点击空白处关闭弹窗
- springboot + websocket + spring-messaging实现服务器向浏览器广播式
- 如何用html把文本框外观格式设为只显示底部的横线
- Spring-data-jpa 学习笔记(二)
- Linux内核分析(第四周)
- [转] map/reduce
- Webrtc源码走读(一)
- javascript JSON. 转换 注意事项
- JS中String()与.toString()的区别
热门文章
- stl_stack.h
- ffpanel --ffmpeg的GUI,让ffmpeg离开黑黑的命令行
- Arc082_F Sandglass
- LuoguP4383 [八省联考2018]林克卡特树lct
- [转]WebKit CSS3 动画基础
- Python:map()、reduce()、filter()的区别
- 【转】 Pro Android学习笔记(六六):安全和权限(3):Provider权限
- RS-485收发的零延时转换电路
- ES6学习之Iterator和For...of循环
- kafka 基础知识梳理(转载)