BFC格式化上下文
块级格式化上下文(Block Fromatting Context
)是按照块级盒子布局的。
BFC
是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC
中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。
W3C对BFC的定义如下:
浮动元素和绝对定位元素,非块级盒子的块级容器(例如
inline-blocks
,table-cells
, 和table-captions
),以及overflow
值不为“visiable”
的块级盒子,都会为他们的内容创建新的BFC
(块级格式上下文)。
即满足以下其中任一或多个条件: 1、float
的值不是none
。 2、position
的值不是static
或者relative
。 3、display
的值是inline-block
、table-cell
、flex
、table-caption
或者inline-flex
。 4、overflow
的值不是visible
。
作用:
- 内部的
Box
会在垂直方向上一个接一个的放置 - 垂直方向上的距离由
margin
决定。(完整的说法是:属于同一个BFC
的两个相邻Box
的margin
会发生重叠,与方向无关。) - 每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明
BFC
中子元素不会超出他的包含块,而position
为absolute
的元素可以超出他的包含块边界) BFC
的区域不会与float
的元素区域重叠,计算BFC
的高度时,浮动子元素也参与计算BFC
就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然
实例1:BFC
垂直方向边距重叠
<section class="box" id="sec">
<style media="screen">
#sec {
background: #f00;
}
.child {
height: 100px;
margin-top: 10px;
background: yellow
}
</style>
<article class="child"></article>
</section>
复制代码
<section class="box" id="sec">
<style media="screen">
#sec {
background: #f00;
overflow: hidden;
}
.child {
height: 100px;
margin-top: 10px;
background: yellow
}
</style>
<article class="child"></article>
</section>
复制代码
实例2:BFC
不与float
重叠
<section id="layout">
<style media="screen">
#layout {
background: red;
}
#layout .left {
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right {
height: 110px;
background: #ccc;
/* overflow: auto; */
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
复制代码
<section id="layout">
<style media="screen">
#layout {
background: red;
}
#layout .left {
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right {
height: 110px;
background: #ccc;
/* 添加下面属性 */
overflow: auto;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
复制代码
BFC
子元素即使是
float
也会参与计算
<section id="float">
<style media="screen">
#float {
background: red;
/* 添加下面属性 */
/* overflow: auto; */
}
#float .float {
float: left;
font-size: 30px;
background-color: yellow;
}
</style>
<div class="float">我是浮动元素</div>
</section>
复制代码
<section id="float">
<style media="screen">
#float {
background: red;
/* 添加下面属性 */
overflow: auto;
}
#float .float {
float: left;
font-size: 30px;
background-color: yellow;
}
</style>
<div class="float">我是浮动元素</div>
</section>
复制代码