应用 CSS 样式时，div 啥时候会塌陷？

Posted 2023-03-06

【中文标题】应用 CSS 样式时，div 啥时候会塌陷？

【英文标题】：When will a div collapse when applying CSS style?应用 CSS 样式时，div 什么时候会塌陷？

【发布时间】：2015-11-18 20:01:20

【问题描述】：

有时 div 在样式设置时会折叠。我已经知道浮动子元素会使父 div 折叠并且两个 div 共享相同的边距。 Some DEMOS

在使用 CSS 时，还有其他情况可以让 div 折叠吗？

【问题讨论】：

How to ask a good question。请发布您已经尝试过的代码，我们不是来为您编码的。

如果我明白你的意思，当孩子们有position:absolute' or the parent has 'display:inline' and the child has display:block;`（例如span中的div）jsbin.com/zipemi。

【参考方案1】：

折叠你的意思是你想让父div在视觉上包含孩子？就像您示例中的第二个框一样。

如果是这样，解决方法是清除浮动后的元素。

只需添加：

.container clear:both; 
.children  float:left; 

【参考方案2】：

如果您使用的是 Bootstrap，只需给父级一个类 clearfix，或者如果您不是，则创建这样的规则

.someClass:before,
.someClass:after 
    display: table;
    content: " ";

.someClass:after 
    clear:both;

然后在遇到此问题时给父类someClass。