CSS媒体查询浮动布局下body无法撑开的原因及解决求助

这问题我之前做响应式布局时也踩过坑！咱们一步步拆解：

为什么会出现body撑不开的情况？ #

核心原因是浮动元素会脱离正常文档流：

• 在正常文档流中，父元素（这里是body）会根据子元素的高度自动撑开，因为子元素的布局会占用文档流空间。
• 但当你给.col-lg-*类设置float: left后，这些区块就“脱离”了正常文档流，body无法感知到它们的高度，自然就没办法被撑开，只会收缩到自身内容（如果有的话）的高度，甚至变成高度为0的状态。
• 你移除float后，区块回到正常文档流，body能正确计算子元素的高度，所以就正常撑开了，但布局也就变成了堆叠的块级元素，不符合你的需求。

怎么修正这个问题？ #

这里给你三种常用的解决方案，从传统到现代布局方式都有：

1. 给父容器添加清除浮动的样式（传统方案） #

这是处理浮动塌陷最经典的方法，通过伪元素清除浮动：

/* 定义一个通用的清除浮动类 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后把这个类加到你的浮动元素的父容器上（如果你的区块是放在一个.row容器里，就给.row加；如果直接在body下，就给body加）。这样伪元素会在浮动元素的最后生成一个看不见的块级元素，强制父容器包含所有浮动内容。

2. 给父容器设置overflow属性（快速方案） #

给父容器（比如body或者包裹区块的容器）设置overflow: auto或overflow: hidden，这会让父容器创建一个BFC（块级格式化上下文），BFC的特性之一就是会包含内部的浮动元素，从而正确计算高度：

body {
  overflow: auto;
}

⚠️ 注意：如果你的区块内容有超出父容器的部分（比如下拉菜单），overflow: hidden会裁剪掉超出的内容，这时候用overflow: auto更安全，它只会在需要的时候显示滚动条。

3. 用Flexbox替代浮动布局（现代推荐方案） #

浮动布局是比较老旧的响应式实现方式，现在更推荐用Flexbox来做布局，它天然解决了高度塌陷的问题，代码也更简洁：
比如先给包裹区块的容器（比如.row）设置为flex容器，然后在媒体查询里调整子元素的宽度：

/* 基础样式：默认堆叠 */
.row {
  display: flex;
  flex-wrap: wrap; /* 让子元素在空间不足时换行 */
}

.col-sm-12 {
  width: 100%;
}

.col-md-6 {
  width: 50%;
}

/* 大屏布局 */
@media (min-width: 992px) {
  .col-lg-4 {
    width: 33.3333%;
    /* 不需要再设置float: left了！ */
  }
}

Flexbox布局下，父容器会自动根据子元素的高度撑开，完全不需要担心浮动塌陷的问题，而且响应式调整也更灵活。

内容的提问来源于stack exchange，提问作者chris b