极客观点
项目管理
HarmonyOS
问一个关于BFC清除兄弟间margin塌陷的问题。希望有人从原理上解答解答。
如图，有两个块级元素发生垂直方向上的margin塌陷。
常见的做法有两种，第一种，将下方元素用另一个BFC包裹起来，这种我能理解，因为BFC之间互不影响嘛。
第二种：为下方元素设置浮动或绝对定位或display:inline-block。
浮动或绝对定位我也能理解，脱离普通文档流了嘛。display:inline-block我不是很懂，是因为生成了IFC，BFC和IFC之间不发生重叠？
注意：如果此时只是给<ul>设置overflow:hidden,display:flex,display:table-cell等使其生成BFC都不会发生作用。
代码如下：
<!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>
* {
margin: 0;
padding: 0;
}
.first {
margin: 100px;
background: lightgreen;
border: 1px solid;
width: 100px;
height: 100px;
}
ul {
/* display: inline-block; */
/* position: fixed; */
/* float: left; */
margin: 100px;
background: lightblue;
border: 1px solid;
width: 200px;
}
li {
margin: 10px 20px;
}
</style>
</head>
<body>
<div class="first"></div>
<!-- <div class="second"> -->
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<!-- </div> -->
</body>
</html>希望有人能解答一下关于下方元素设置dispaly:inline-block可以解决margin塌陷的原理。
html5
因为标准就是这么写的：