在网页设计中，CSS布局常常会遇到父容器（父div）无法自动适应子元素（子div）高度的问题。这种现象会出现在多种布局场景中，尤其是在子容器高度大于父容器时。当父div没有设置固定高度而其内部的子div由于内容多而高度超过了父div时，就会出现父div无法完整包裹子div的现象。为了解决这个问题，可以采用以下几种方法：
第一种解决方案是在父div的最下方加入一个空白div，这个空白div通过设置其字体大小为0（font:0px/0px sans-serif），使得该div本身不显示任何内容，但又能撑开足够的空间来适应内部子div的高度。其CSS样式可以是：
```html
<div id="parent">
<div id="content"></div>
<div style="font:0px/0px sans-serif; clear:both; display:block;"></div>
</div>
```
这个空白的div通过`clear:both`属性清除浮动，`display:block`确保它以块级元素形式呈现，这样才能撑开父div的高度。
第二种解决方案是使用一个高度为1px的div或br标签来实现高度的撑开，其CSS样式如下：
```html
<div style="height:1px; margin-top:-1px; clear:both; overflow:hidden;"/>
```
或者
```html
<br style="clear:both;"/>
```
在这个例子中，通过设置`height:1px`使得div或br标签产生一个极小的可见高度，`margin-top:-1px`是利用负边距将这个高度调整至不可见，而`clear:both`和`overflow:hidden`是为了清除浮动，保持布局的整洁。使用`<br>`标签时，其`clear:both`属性同样有效。
这两种解决方案都是通过创建一个不可见的空间来确保父容器能够扩展以适应子容器的高度。虽然这些方法看起来有些非直观，但在实际的网页布局中非常有效。它们可以保证在不同浏览器下，包括旧版浏览器，父容器的高度都能适应子容器内容的变化。
需要注意的是，这些解决方案利用了浏览器的默认渲染行为，可能在某些情况下并不完全稳定。此外，某些新的布局技术如Flexbox和Grid布局提供了更为直接和灵活的方式来解决高度自适应问题，如果项目允许，可以考虑使用这些现代布局技术来替代上述传统方法。Flexbox和Grid布局通过设置`display: flex`或`display: grid`在父容器上，然后利用相应的属性来控制子元素的排列和大小，从而使得父容器高度自动适应子容器的需要。这种方法不仅代码更为简洁，而且在各种复杂布局中表现更加稳定可靠。
