1.box(盒子)
页面的基本构成元素,分为inline,block,inline-block三种类型的box.
2.FC(Formatting Context)
Formatting Context是W3C规范中的一种概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
常见得Formatting Context有Block formatting context(简称BFC)和inline formatting context(简称IFC).
3.BFC的定义
Block formatting context 直译为 块级格式化上下文。是一个独立的渲染区域,只有Block-level box参与,它规定了内部的block-level box如何布局,且与这个区域的外部毫不相干。
4.BFC布局规则
- 内部的box会在垂直方向,一个接一个地放置
- box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠
- 每个元素的margin box的左边,与包含块border box 的左边相接触,即使存在浮动也如此
- BFC的区域不会与float元素重叠(一般用来清除浮动)
- BFC就是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
- 计算BFC的高度时,浮动元素也参与计算
BFC布局规则示例
1.内部的box会在垂直方向,一个接一个地放置:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wapper{
border:2px solid orange;
}
.box1{
width:200px;
height:150px;
background-color: red;
}
.box2{
width:200px;
height:350px;
background-color: green;
}
</style>
</head>
<body>
<div class="wapper">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</body>
</html>
2.box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠
tips(margin塌陷与合并):
1.父与子之间:子级上下margin会与父级上下margin重叠,以最大值为标准去渲染
2.兄弟元素之间:兄弟的上下边距取最大值
3.空元素:如果设置了margin-top和margin-bottom,会在这两之间取最大值作为最终边距值
关于margin塌陷和合并的问题可以通过触发父盒子bfc来解决
3.每个元素的margin box的左边,与包含块border box 的左边相接触,即使存在浮动也如此
第三条:子盒子margin和父盒子边框相接触
.wapper{
border:2px solid orange;
}
.box1{
width:200px;
height:150px;
background-color: red;
//下边距
margin-bottom: 30px;
}
.box2{
width:200px;
height:350px;
background-color: green;
//上边距
margin-top: 100px;
}
4.BFC的区域不会与float元素重叠
5.BFC就是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
该做法同时也是两栏布局的做法之一:左侧浮动,右侧自适应
.wapper{
border:2px solid orange;
}
.box1{
width:200px;
height:150px;
background-color: red;
//这里浮动了,box2就会占据box1的位置
float: left;
}
.box2{
//这里添加overflow:hidden使该盒子形成bfc区域
overflow: hidden;
width:300px;
height:150px;
background-color: green;
}
6.计算BFC的高度时,浮动元素也参与计算
.wapper{
//没有设置高度,又加上浮动脱标,所以高度塌陷,此时计算该盒子的高度应将它里面的子盒子的
高度计算在其中
border:2px solid orange;
//在这里面使用overflow可以清楚浮动,实际上就是利用了bfc可以包裹住浮动元素这一点
}
.box1{
width:200px;
height:150px;
background-color: red;
//浮动
float: left;
}
.box2{
//浮动
float: left;
width:300px;
height:150px;
background-color: green;
}
5.如何创建BFC
- overflow不为visible时
- float不为none时
- position不为static或不为relative时
- display为inline-block,table-cell,table,table-caption时
- display:flow-root 这个属性就是单纯为创建bfc提供的,但有兼容问题
总结BFC可以解决的问题
- 包裹浮动元素(解决浮动元素的父盒子塌陷问题)
- 解决margin塌陷和合并
- 提供多栏布局的一种做法