为什么父元素div没有被包含的子元素div所撑开高度？

这可能是因为子元素 div 采用了浮动或绝对定位等方式导致父元素 div 无法获取子元素 div 的高度。可以通过使用 clear:both 或其他清除浮动技巧，让父元素 div 能够正确获取子元素 div 的高度。

示例代码：

HTML：

<div class="parent"> <div class="child">子元素 div </div> </div>

CSS：

.parent{ border:1px solid #000; /* 父元素 div 浮动或绝对定位 */ float:left; }

.child{ /* 子元素 div 浮动或绝对定位 */ float:left; }

/* 清除浮动 */ .clear{ clear:both; }

解决方式一：添加 clear:both 属性

<div class="parent"> <div class="child">子元素 div </div> <div class="clear"></div> </div>

CSS：

.clear{ clear:both; }

解决方式二：使用 overflow 属性

<div class="parent"> <div class="child">子元素 div </div> </div>

CSS：

.parent{ border:1px solid #000; overflow:auto; }

.child{ float:left; }