最近遇到一个专业的名词,不是很懂,所以了解了一下,并总结归纳一下。首先清楚我们的问题是什么?
BFC是什么?怎么创建?什么情况下创建?有什么特性和作用?
BFC是什么?
BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
如何触发BFC?
1,浮动元素,float 除 none 以外的值
2,绝对定位元素,position 的absolute,fixed(CSS3新增触发条件)值
3,display 为以下其中之一的值 inline-blocks,table-cells,table-captions(CSS3新增触发条件)
但是,"display:table" 本身并不产生 BFC,而是由它产生匿名框,匿名框中包含 "display:table-cell" 的框会产 BFC。 总之,对于 "display:table" 的元素,产生 BFC 的是匿名框而不是 "display:table"。
4,overflow 除了 visible 以外的值(hidden,auto,scroll)
在 CSS3 中,BFC 叫做 Flow Root。
值得注意的是,BFC 并不是元素,而是某些元素带有的一些属性,因此,是上面这些元素产生了 BFC ,而它们本身并不是 BFC ,这个概念需要区分清楚。
特性
1,BFC 会阻止外边距折叠
两个相连的 div 在垂直上的外边距会发生叠加;外边距折叠的规则:仅当两个块级元素相邻并且在同一个块级格式化上下文时,它们垂直方向之间的外边距才会叠加;所以说,即便两个块级元素相邻,但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。因此,阻止外边距折叠只需产生新的 BFC 。
例子: 三个 div 各包含一个 p 元素,三个 div 及其包含的 p 元素都有顶部和底部的外边距。但只有第三个 div 的边距没有与它的子元素 p 的外边距折叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: red;
width: 500px;
margin-top: 50px;
margin-bottom: 50px;
}
div {
background-color: yellow;
margin-top: 50px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div><p>第一段</p></div>
<div><p>第二段</p></div>
<div><p style="display: inline-block">第三段</p></div> //添加了display:inline-block属性,具有BFC属性
</body>
</html>
2,BFC 可以包含浮动的元素
有两个 div ,它们各包含一个设置了浮动的 p 元素,但第一个 div 出现了“高度塌陷”,这是因为内部的浮动元素脱离了普通流,因此该 div 相当于一个空标签,没有高度和宽度,即高度为 0 ,上下边框也重叠在一起。而第二个 div 使用 overflow: hidden 触发了 BFC ,可以包含浮动元素,因此能正确表现出高度,其边框位置也正常了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: red;
float: right;
}
div {
background-color: yellow;
margin-bottom: 50px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div><p>第一段</p></div>
<div style="overflow: hidden "><p >第二段</p></div>
</body>
</html>
3,BFC 可以阻止元素被浮动元素覆盖
蓝色背景的 div 使用 overflow: hidden 触发了 BFC ,它并不会被它的兄弟浮动元素覆盖,而是处于它的旁边。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: blue;
width: 300px;
}
div {
border: 1px solid #ccc;
}
.blue {
background-color: yellow;
width: 200px;
float: left;
}
</style>
</head>
<body>
<div><p class="blue">第一段</p><p>第一段2</p></div>
<div><p class="blue">第二段</p><p style="overflow: hidden">第二段2</p></div>
</body>
</html>
以后可能还会有补充。