<!--最好直接复制代码丢到vscode中，都是小案例＋解析-->
<!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>
.box1 {
width: 100px;
height: 100px;
background: red;
margin-bottom: 30px;
}
.box2 {
width: 100px;
height: 100px;
background: green;
margin-top: 30px;
}
.box {
overflow: hidden; /*ok的*/
/* display: flex; OK的*/
/* position: absolute; 不ok*/
}
.box3 {
width: 300px;
height: 300px;
background: green;
margin-bottom: 50px;
}
.box4 {
width: 100px;
height: 100px;
background: red;
margin-top: 30px;
}
.box5 {
width: 300px;
height: 300px;
background: green;
overflow: hidden;
}
.box6 {
width: 200px;
border: 1px solid black;
margin-top: 60px;
}
.box7 {
width: 100px;
height: 100px;
background: red;
float: left;
}
.box8 {
width: 200px;
border: 1px solid black;
margin-top: 200px;
overflow: hidden; /*OK的*/
/* display: inline-block; OK的 */
/* float: left; OK的*/
}
.box9 {
width: 100px;
height: 100px;
background-color: blueviolet;
float: left;
}
.box10 {
height: 400px;
background-color: brown;
/* overflow: hidden;*/ /*这是解决方法*/
}
</style>
</head>
<body>
<!-- BFC是啥？
触发BFC的元素，可以形成一个独立的元素，
不受到外界的影响，从而解决布局问题。
触发BFC的方法
1、浮动元素：float除none以外的值
2、绝对定位元素：position（absolute、fixed）
3、display为inline-block、table-cells、flex
4、overflow除visible以外的值（hidden、auto、scroll）
-->
<!-- BFC规范解决的问题 -->
<!-- 1、margin叠加 -->
<div class="box1"></div>
<div class="box2"></div>
<!-- 用BFC解决margin叠加: -->
<div class="box">
<div class="box1"></div>
</div>
<div class="box">
<div class="box2"></div>
</div>
<!-- 2.margin的传递 -->
<div class="box3">
<div class="box4"></div>
</div>
<!-- 用BFC解决margin传递 -->
<div class="box5">
<div class="box4"></div>
</div>
<!-- 3.浮动问题 -->
<div class="box6">
<div class="box7"></div>
</div>
<!-- 用BFC解决浮动问题 -->
<div class="box8">
<div class="box7"></div>
</div>
<!-- 4.覆盖问题 -->
<div class="box9"></div>
<div class="box10">你好,我是飞飞的小歪</div>
<!-- 解决方法在.box10中触发BFC规则,此问题常见的布局:左边固定右侧自适应 -->
</body>
</html>
1840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
