概念
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域
什么鬼? 干什么? 我用过?
其实就是你的页面,不信你看看
BFC创建的方法
- 根元素(
<html>
) - 浮动元素 (元素的
float
不是none
) - 绝对定位元素(元素的
position
为absolute
或fixed
) - 行内块元素(元素的
display
为inline-block
) - 表格单元格(元素的
display
为table-cell
,HTML表格单元格默认为该值) - 表格标题(元素的
display
为table-caption
,HTML表格标题默认为该值) - 匿名表格单元格元素(元素的
display
为table
、table-row
、table-row-group
、table-header-group
、table-footer-group
(分别是HTMLtable
、row
、tbody
、thead
、tfoot
的默认属性)或inline-table
) overflow
值不为visible
的块元素display
值为flow-root
的元素contain
值为layout
、content
或paint
的元素- 弹性元素(
display
为flex
或inline-flex
元素的直接子元素) - 网格元素(
display
为grid
或inline-grid
元素的直接子元素) - 多列容器(元素的
column-count
或column-width
不为auto
,包括column-count
为 1) column-span
为all
的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中
看第一条根HTML元素,那不就是我们整个页面就是一个BFC;
BFC包含创建它的元素内部的所有内容,但是不包括创建了新BFC的子元素的内部内容
BFC布局规则:
- 内部的盒会在垂直方向一个接一个排列(就是平常我们块级元素的排列);
- 浮动盒区域不会与BFC重叠;
- 每个元素的margin的左边,与容器块border 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此;
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素;
- 处于同一个BFC中的元素相互影响,可能会发生margin(外边距)重叠;
- 计算BFC的高度时,考虑BFC所包含的所有元素,连浮动元素也参与计算;
规则1 内部的盒会在垂直方向一个接一个排列
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
div {
height: 50px;
}
.box1 {
width: 400px;
background-color: #82A6F5;
}
.box2 {
width: 300px;
background-color: #EAF048;
}
.box3 {
width: 100px;
background-color: #9FF048;
}
.box4 {
width: 200px;
height: 30px;
background-color: #2A5200;
}
规则2 浮动盒区域不会与BFC重叠
蓝色盒子设置浮动,黄色盒子会与之重合
<div class="col1"></div>
<div class="col2"></div>
div {
height: 400px;
}
.col1 {
width: 400px;
background-color: #82A6F5;
float: left;
}
.col2 {
height: 500px;
background-color: #EAF048;
}
创建BFC
使用
overflow:hidden
创建BFC
.col2 {
/**创建BFC**/
overflow: hidden;
height: 500px;
background-color: #EAF048;
}
规则3 每个元素的margin的左边,与容器块border 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
<div class="col1"></div>
<div class="col2"></div>
body{
border: 10px solid #000000;
}
.col1 {
width: 400px;
background-color: #82A6F5;
float: left;
}
.col2 {
height: 500px;
background-color: #EAF048;
}
规则5 处于同一个BFC中的元素相互影响,可能会发生margin重叠(以最大的margin为准);
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
.col1 {
width: 400px;
height: 400px;
background-color: #82A6F5;
margin-bottom: 50px;
}
.col2 {
height: 500px;
width: 400px;
background-color: #EAF048;
margin-bottom: 60px;
}
规则6 计算BFC的高度时,考虑BFC所包含的所有元素,连浮动元素也参与计算
<div class="col">
<div class="col1"></div>
<div class="col2"></div>
</div>
.col{
border: 1px solid #2A5200;
overflow: hidden;
}
.col1 {
width: 400px;
height: 400px;
background-color: #82A6F5;
}
.col2 {
height: 500px;
width: 400px;
background-color: #EAF048;
float: left;
}
增加div.col
overfloe:hidden;
,创建了一个新的BFC高度增加
.col{
border: 1px solid #2A5200;
overflow: hidden;
}
咦? 怎么少了个规则4呢,其实仔细看看上面的例子都体现了布局规则4 - BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素;
BFC能解决什么呢?
因为BFC内部的元素和外部的元素绝对不会互相影响,因此,当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。 避免外边距塌陷也是这样的一个道理。
结语
上面说的有些东西,其实在我们平常的布局中,已经有在使用这些规律,只是没有总结出来,如果写的不好之处欢迎批评指导。