css之BFC块级格式化上下文
BFC 定义
BFC(块级格式化上下文),一个创建了新的BFC的盒子是独立布局的,盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题
BFC是指浏览器中创建了一个独立的渲染区域,该区域内所有元素的布局不会影响到区域外元素的布局,这个渲染区域只对块级元素作用。
BFC的布局规则
-
内部的Box会在垂直方向,一个接一个地放置。
-
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
-
每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
-
BFC的区域不会与float box重叠。
-
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
-
计算BFC的高度时,浮动元素也参与计算。
满足下列条件之一就可触发 BFC
- 根元素,即 html
- float 的值不为none(默认)
- overflow 的值不为 visible(默认)
- display 的值为 inline-block、table-cell、table-caption
- position 的值为 absolute 或 fixed
如何创建BFC
- float的值不是none。
- position的值不是static或者relative。
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
BFC的作用
1.利用BFC避免margin重叠。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin重叠</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
p {
color: red;
background: yellow;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
</style>
<body>
<p>margin 1</p>
<p>margin 1</p>
</body>
</html>
根据第二条,属于同一个BFC的两个相邻的Box会发生margin重叠,所以我们可以设置,两个不同的BFC,也就是我们可以让把第二个p用div包起来,然后激活它使其成为一个BFC
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防止margin重叠</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
p {
color: red;
background: yellow;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
div{
overflow: hidden;
}
</style>
<body>
<p>margin 1</p>
<div>
<p>margin 2</p>
</div>
</body>
</html>
2.自适应两栏布局
根据:
每个盒子的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应两栏布局</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
position: relative;
}
.left {
width: 100px;
height: 150px;
float: left;
background-color:burlywood;
text-align: center;
line-height: 150px;
font-size: 20px;
}
.right {
height: 300px;
background-color:coral;
text-align: center;
line-height: 300px;
font-size: 40px;
}
</style>
<body>
<div class="left">左侧</div>
<div class="right">右侧</div>
</body>
</html>
- BFC的区域不会与float box重叠,所以让right单独成为一个BFC
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应两栏布局</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
position: relative;
}
.left {
width: 100px;
height: 150px;
float: left;
background-color:coral;
text-align: center;
line-height: 150px;
font-size: 20px;
}
.right {
overflow: hidden;
height: 300px;
background-color:royalblue;
text-align: center;
line-height: 300px;
font-size: 40px;
}
</style>
<body>
<div class="left">左侧</div>
<div class="right">右侧</div>
</body>
</html>
3.清楚浮动。
当我们不给父节点设置高度,子节点设置浮动的时候,会发生高度塌陷,这个时候我们就要清楚浮动。
比如这样:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
</head>
<style>
.parent {
border: 5px solid royalblue;
width: 110px;
}
.child {
border: 5px solid coral;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- 计算BFC的高度时,浮动元素也参与计算,给父节点激活BFC
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
</head>
<style>
.parent {
border: 5px solid royalblue;
width: 110px;
overflow: hidden;
}
.child {
border: 5px solid coral;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
总结
以上例子都体现了:
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。