高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。 本教程操作环境：windows7系统、CSS3版、Dell G3电脑。 如果父元素只包含浮动元素，且父元素未…

众所周知，像div，段落，文本等html元素会逐渐适应他们子元素的内容。但如果这些元素的子元素设置浮动，例：向右或向左漂浮，那么这些元素可能会崩溃，出现高度塌陷问题（如下示例）。下面本篇文章就来给大家介绍使用css解决父元素高度塌陷问题的方法，希望对大家有所帮助。【相关视频教程推荐：css教程】 什…

子元素使用 position: absolute 或 float 脱离文档流后，父元素无法感知其尺寸，导致高度塌陷。例如，当 .child 设置为 absolute 时，.parent 因无其他常规流内容而高度为 0。解决方法包括：1. 为父元素设置 min-height 并配合 relative …

高度塌陷由子元素脱离文档流导致，解决方法包括：1. 使用clearfix类通过伪元素清除浮动；2. 触发父元素BFC，如设置display: flow-root或overflow: hidden；3. 采用flex或grid布局，自动包裹子元素；4. 避免使用固定高度。推荐优先使用display: …