容器无法并排对齐求助：30%与70%宽度容器错位如何修复？

这个问题我碰到过好多次啦，主要是CSS默认的盒模型在搞鬼！咱们一步步来解决：

核心原因 #

你设置的width: 30%和width:70%在默认的content-box盒模型下，只代表元素内容区域的宽度。如果容器有padding、border，这些都会额外增加元素的总宽度，导致两个容器的总宽度超过100%，自然就会换行错位了。

解决方案1：统一盒模型（最直接） #

给所有元素设置box-sizing: border-box，这样元素的width会包含内容、padding和border，总宽度就不会超出你设置的百分比了。同时重置默认的margin和padding，避免浏览器自带的样式干扰：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main { 
  background-color: #f2f2f2; 
  padding: 10px; 
  float: right; 
  width: 70%; 
}

aside { 
  text-align: center; 
  background-color: #c4c4c4; 
  overflow: hidden; 
  float: left; 
  width: 30%; 
}

解决方案2：用Flex布局替代浮动（更现代稳定） #

浮动布局容易出现各种兼容性和排版问题，推荐用Flex布局来实现，代码更简洁，也不用处理浮动的 clearfix 等问题：

首先给两个容器的父元素添加display: flex：

/* 假设父元素是body或者某个容器，比如叫.container */
.container {
  display: flex;
}

main { 
  background-color: #f2f2f2; 
  padding: 10px; 
  width: 70%; 
}

aside { 
  text-align: center; 
  background-color: #c4c4c4; 
  overflow: hidden; 
  width: 30%; 
}

Flex布局会自动让子元素在同一行排列，而且默认会处理好宽度分配，非常省心。

额外检查点 #

如果上面的方法还没解决，你可以检查：

• 父元素是否有padding或margin，导致可用宽度小于100%
• 两个容器是否有额外的margin，这也会增加总宽度

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