为何媒体查询使元素溢出容器？Grid系统适配问题求助

嘿，我来帮你排查一下这个栅格溢出的问题！你遇到的元素溢出容器的情况，可能由几个小细节导致，咱们一步步来解决：

可能的原因分析 #

1. 默认内边距未清除
   浏览器默认会给body设置padding: 8px，你只清除了margin但没处理padding，这会让你的.container（宽度95%）加上左右内边距后，总宽度在小屏幕下可能超出视口，触发横向滚动条。

2. 浮动元素的舍入误差
   你用的百分比宽度（比如16.6666%）是对1/6的近似，虽然理论上6个加起来接近100%，但部分浏览器的舍入计算可能会让总宽度略超父容器，导致溢出。

3. Row未建立BFC包含浮动元素
   你的.container加了clearfix，但.row里的.col是浮动元素——虽然你给.row设置了固定高度，但如果后续调整高度，很容易出现布局塌陷或溢出问题，最好给.row也添加BFC（块级格式化上下文）来稳定布局。

修复方案 #

1. 清除默认内外边距并统一box-sizing #

把html,body的样式改成这样，确保清除所有默认内外边距，并且让所有元素都继承border-box，避免遗漏：

html,body{ 
  box-sizing:border-box; 
  margin:0; 
  padding:0; 
}
* { box-sizing: inherit; }

2. 给Row添加BFC或Clearfix #

你可以选择两种方式：

• 方式一：添加overflow:hidden
  快速建立BFC，确保.row能包含所有浮动的.col：

.row{ 
  box-sizing:border-box; 
  height:50px; 
  border:5px solid orange; 
  width:auto; 
  overflow:hidden; 
}

• 方式二：给Row添加clearfix
  如果不想用overflow:hidden（比如需要显示超出row的元素），可以给.row也加上clearfix：

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

3. 优化百分比精度 #

把近似的百分比调整得更精准，减少浏览器舍入带来的误差：

.col-1{width:16.6667%;}
.col-2{width:33.3334%;}
.col-3{width:50%;}
.col-4{width:100%;}

修改后的完整代码 #

html,body{ 
  box-sizing:border-box; 
  margin:0; 
  padding:0; 
}
* { box-sizing: inherit; }

.container{ 
  width:95%; 
  margin-left:auto; 
  margin-right:auto; 
  background-color:yellow; 
}
.container::after{ 
  content:""; 
  clear:both; 
  display:block; 
}

.row{ 
  box-sizing:border-box; 
  height:50px; 
  border:5px solid orange; 
  width:auto; 
  overflow:hidden; 
}

.col{ 
  float:left; 
  box-sizing:border-box; 
  height:100%; 
  border:5px solid red; 
}

.col-1{width:16.6667%;}
.col-2{width:33.3334%;}
.col-3{width:50%;}
.col-4{width:100%;}

/*Wichtige Viewports >1200+px:Desktop 768px:Tablet Hochformat; 480px:Handy Querformat */
@media(max-width:768px){ 
  .col-1{width:50%} 
  .col-2{width:50%} 
}
@media(max-width:480px){ 
  .col-1{width:100%} 
  .col-2{width:100%} 
  .col-3{width:100%} 
}

<div class="container">
 <div class="row">
 <div class="col col-1"></div>
 <div class="col col-1"></div>
 <div class="col col-1"></div>
 <div class="col col-1"></div>
 <div class="col col-1"></div>
 <div class="col col-1"></div>
 </div>
 <div class="row">
 <div class="col col-2"></div>
 <div class="col col-2"></div>
 <div class="col col-2"></div>
 </div>
 <div class="row">
 <div class="col col-3"></div>
 <div class="col col-3"></div>
 </div>
 <div class="row">
 <div class="col col-4"></div>
 </div>
</div>

这样调整后，你的栅格布局应该就不会出现溢出问题了，而且所有容器（包括后续添加的）都会因为统一的box-sizing和BFC设置，避免溢出和布局塌陷。

内容的提问来源于stack exchange，提问作者No Body