BFC(Block Formatting Context—块级格式化上下文)是Web页面中盒模型布局的CSS渲染模式,是一个独立的渲染区域。它的定位体系属于常规文档流。
BFC布局规则:
- 内部的Box会在垂直方向,一个接一个地放置;
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠;
- 每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此;
- BFC的区域不会与float box重叠;
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算。
可以生成BFC的元素
- float的值不为none(float:left将会把元素置于容器的左边,其他元素环绕着它)
- position的值为absolute
- display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个(display:table可能会产生一些问题)
- overflow的值不为visible (overflow:hidden将会剪切掉溢出的元素,overflow:scroll可能会显示不必要的滚动条)
- 根元素
BFC盒子对齐
在BFC中,每个盒子的左外边框紧挨着包含块的左边框(从右到左的格式,则为紧挨右边框)。即使存在浮动也是这样的(尽管一个盒子的边框会由于浮动而收缩),除非这个盒子的内部创建了一个新的BFC浮动,盒子本身将会变得更窄)
BFC应用
1、防止外边距折叠
在常规文档流中,盒子都是从包含块的顶部开始一个接着一个垂直堆放。两个兄弟盒子之间的垂直距离是由他们个体的外边距所决定的,但不是他们的两个外边距之和。
外边距折叠:当兄弟元素的外边距不一样时,将以最大的那个外边距为准。
解决方法:毗邻块盒子的垂直外边距折叠只有他们是在同一BFC时才会发生。如果他们属于不同的BFC,他们之间的外边距将不会折叠。所以通过创建一个新的BFC我们可以防止外边距折叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距问题</title>
<style type="text/css">
.container {
width: 300px;
height:500px;
background-color: red;
overflow: hidden; /* creates a BFC*/
}
p {
text-align: center;
width:300px;
display: table;
height:100px;
background-color: lightgreen;
margin: 30px 0;
}
.newBFC {
overflow: hidden; /* creates new BFC*/
}
</style>
</head>
<body>
<div class="container">
<p>盒子1</p>
<p>盒子2</p>
<div class="newBFC">
<p>盒子3</p>
</div>
</body>
</html>
当第二和第三个兄弟元素属于不同的BFC时,在他们之间将不会有任何外边距折叠著作权归作者所有。
页面效果
2、清除浮动
给父元素添加overflow:hidden,生成一个BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.container {
background-color: red;
width:300px;
height: 200px;
overflow: hidden; /* create a BFC */
}
.container div {
width:100px;
height: 100px;
text-align: center;
float: left;
background-color: indianred;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div>盒子1</div>
<div>盒子2</div>
</div>
</body>
</html>
页面效果
3、自适应两栏布局(防止文字环绕)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两栏布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#image{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
#main{
width: 300px;
overflow: hidden; /*create a BFC*/
background-color: indianred;
}
</style>
</head>
<body>
<div id="image"></div>
<div id="main">
《卖炭翁》是唐代诗人白居易创作的《新乐府》组诗中的一篇。
此诗以个别事例来表现普遍状况,描写了一个烧木炭的老人谋生的困苦,
通过卖炭翁的遭遇,深刻地揭露了“宫市”的腐败本质,
对统治者掠夺人民的罪行给予了有力的鞭挞与抨击,
讽刺了当时腐败的社会现实,表达了作者对下层劳动人民的深切同情,
有很强的社会典型意义。全诗描写具体生动,历历如绘,结尾戛然而止,含蓄有力,
在事物细节的选择上和人物心理的刻画上有独到之处
</div>
</body>
</html>
页面效果
4、实现三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三栏布局</title>
<style type="text/css">
*{
text-align: center;
}
.left{
margin-right: 20px;
float: left;
height: 200px;
width: 100px;
background-color: red;
}
.right{
margin-left: 20px;
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.main{
height: 200px;
overflow: hidden; /*create a BFC*/
background-color: rosybrown;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
</body>
</html>
页面效果