css - 为什么溢出:隐藏不能防止兄弟div中的边距折叠为显示:内联块?
问题描述
据我所知,overflow: hidden
既display:inline-block
可以建立新的阻塞格式上下文,又可以阻止格式上下文防止边距崩溃。
但overflow:hidden
不能防止同级 div 之间的边距折叠为display:inline-block
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1 {
background-color: red;
margin-bottom: 100px;
}
.div2 {
background-color: orange;
margin-top: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
我希望overflow:hidden
.div2 上的可以建立块格式上下文,并且 .div1 和 .div2 之间的边距应该是 300px。但它没有用。为什么?
解决方案
由块框建立的兄弟块格式化上下文之间的边距不会侵入任何一个上下文,因此允许边距折叠正常发生。通过创建新的 BFC 来防止的边距折叠是在建立 BFC 的父级和任何流入块级子盒之间的边距折叠。
内联块之间的边距不折叠的原因不是因为它们建立了块格式化上下文,而是因为兄弟之间的边距只有在它们是块级盒子时才会折叠,而不是在它们是内联盒子时折叠(内联,内联块,内联表或其他)。
推荐阅读
- node.js - Node.js 响应无需等待一些操作
- automated-tests - 以编程方式从表中选择链接
- php - 表单集合如何避免创建重复记录(OneToMany - ManyToOne)
- angular - Angular 路由器 - 使用 [routerLink] 在组件上导航
- amazon-web-services - GoLang 中的 AWS4 签名
- curl - 使用 cURL 获取资源时得到空响应
- java - javax servlet 过滤器不适用于 Mono 反应器
- xquery - 通过 URI 从 BaseX 数据库中选择文档作为根上下文
- android - 如何关闭某些无障碍服务的触摸探索
- python - 理解 __delete__ 在描述符中的行为,在一行上进行多变量赋值