浮动宽度不够换行，高度不够

### CSS 浮动元素宽度和高度不足的解决方案

#### 方法一：清除浮动
为了防止父级容器因为子元素浮动而发生高度塌陷，可以在所有浮动元素之后添加一个空的 `<div>` 标签，并为其设置 `clear: both` 属性。这能确保父元素能够正常包裹其内的浮动子元素。

<div class="parent">
    <div class="child float-left"></div>
    <div class="clearfix"></div> <!-- 添加此 div -->
</div>

<style>
.parent {
    border: 1px solid black;
}
.child {
    width: 50%;
    background-color: lightblue;
    float: left;
}
.clearfix {
    clear: both;
}
.float-left {
    float: left;
}
</style>

这种方法通过引入额外的 HTML 结构来解决问题[^3]。

#### 方法二：使用伪类清除浮动
为了避免增加不必要的 DOM 节点，可以利用 CSS 的伪类选择器 `::after` 来实现相同的效果：

.parent::after {
    content: "";
    display: block;
    clear: both;
}

.child {
    float: left;
    /* other styles */
}

这种方式不需要修改原始HTML结构即可达到清除浮动的目的[^4]。

#### 方法三：设置溢出属性
给定父级容器应用 `overflow:hidden;` 或者其他非可见值（如 auto），可以让浏览器重新计算该容器的实际尺寸并包含所有的浮动子项。需要注意的是，如果页面设计中有意图让某些部分超出边界显示，则应谨慎使用此方法。

.parent {
    overflow: hidden;
}

这种技术简单有效，在很多情况下都能很好地处理浮动引起的问题[^2]。

#### 方法四：弹性盒模型 Flexbox
对于现代Web开发而言，推荐考虑采用更先进的布局方式——Flexbox。它可以轻松应对复杂的列式排列需求而不必担心传统浮动所带来的各种麻烦。

.container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex-grow: 1;
    min-width: 200px; /* 设置最小宽度 */
}

以上四种策略都可以有效地解决由于CSS中的浮动特性所造成的布局挑战。具体选用哪种取决于项目的实际需求和个人偏好。