概念
BFC:块格式化上下文,是一个独立的区域,同时不同的BFC之间不会相互影响。
BFC的触发情况(条件)
- 有浮动属性float的时候
- 当overflow的属性值不为visible的时候
- 定位position的属性值为absolute或者fixed的时候
- display的属性值为inline-block或者flex
作用(应用场景)
1.解决margin在垂直方向上的粘连问题和塌陷问题
2.实现两列布局:左边设置左浮动,右边设置overflow:hidden
3.清除浮动
品字布局
先实现上边固定,下边自适应的布局,上下均设置定位,上边有高度,下边没有,下边设置上下左三个方向的坐标
实现下边左右两边布局,左边固定宽度,右边宽度自适应
品字布局移动端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>品字布局移动端</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
flex-direction: column;
}
.top {
height: 100px;
width: 100%;
background: rgb(255, 210, 210);
}
.bottom {
width: 100%;
background: rgb(182, 255, 169);
flex: 1;
display: flex;
}
.left {
width: 150px;
height: 100%;
background: rgb(242, 255, 169);
}
.right {
height: 100%;
flex: 1;
background: rgb(194, 248, 255);
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
品字布局PC端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>品字布局PC端</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.top {
height: 100px;
width: 100%;
background: rgb(226, 248, 184);
position: fixed;
top: 0;
left: 0;
}
.bottom {
width: 100%;
background: rgb(238, 199, 199);
position: fixed;
top: 100px;
bottom: 0;
left: 0;
}
.left {
width: 150px;
height: 100%;
background: rgb(199, 233, 238);
float: left;
}
.right {
height: 100%;
background: rgb(248, 224, 118);
overflow: hidden;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>