已设置overflow:hidden但div仍溢出，求无滚动的布局调整方案

嘿，我之前也踩过这个坑！明明给div加了overflow:hidden但元素还是往外跑，多半是布局上下文或者盒模型的细节没处理好，咱们一步步来搞定它：

常见原因及对应解决方案 #

1. 浮动元素导致父容器高度塌陷 #

如果你的.contact-top里用了Bootstrap的pull-left/pull-right这类浮动类，父容器.contact-bar会因为识别不到浮动元素的高度而塌陷，进而出现溢出。给父容器加个清除浮动的样式就能解决：

.contact-bar::after {
  content: "";
  display: table;
  clear: both;
}

2. 盒模型计算导致元素超宽 #

默认情况下，元素的width不包含padding和border，如果.contact-top的padding+border加上内容宽度超过了父容器，就会触发溢出。全局设置box-sizing: border-box能让padding和border直接纳入宽高计算：

* { 
  margin:0; 
  padding:0; 
  box-sizing: border-box; /* 统一全局盒模型 */
}

3. Bootstrap全局样式冲突 #

Bootstrap自带的样式可能给某些元素默认加了width:100%或者额外的margin，导致元素超出视口范围。给.contact-bar加上max-width:100%限制它的最大宽度：

.contact-bar {
  max-width: 100%;
  overflow: hidden;
}

4. 绝对定位元素脱离文档流 #

如果.contact-top里有绝对定位的元素，它会脱离文档流，父容器的overflow:hidden根本无法裁剪它。这时候需要把父容器设为相对定位，让绝对定位元素以父容器为参考系：

.contact-bar {
  position: relative;
  overflow: hidden;
}

修改后的完整代码示例 #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
* { 
  margin:0; 
  padding:0; 
  box-sizing: border-box;
}
.contact-bar { 
  overflow: hidden; 
  position: relative;
  max-width: 100%;
}
.contact-bar::after {
  content: "";
  display: table;
  clear: both;
}
.contact-top { 
  background-color: #1a1a1a; 
  border: 1px solid transparent; 
  padding: 5px; 
}
.contact-top p { 
  margin: 0 20px; 
  color: white; 
}
</style>
<div class="contact-bar">
  <div class="contact-top">
    <p>你的联系栏内容</p>
  </div>
</div>

你可以根据自己的实际布局情况逐个尝试这些方案，应该能顺利解决溢出问题~

内容的提问来源于stack exchange，提问作者Timilehin Osaze Adegbulugbe