css - 导致浮动堆叠的边框

Question

下面的代码产生了两个不错的列和一个页脚：

<div class="column one">
ONE
</div>

<div class="column two">
TWO
</div>

<div class="footer">
Footer
</div>​

用CSS：

.column {float: right; width: 30%; margin: 0 10%;}
.footer {clear: both;}

那么为什么当我添加边框时，两列突然堆叠在一起？

.column, .footer {
  border-style:solid;
  border-width:1px;
 }

见 - 小提琴：http: //jsfiddle.net/usdu7/19/

Answer 1

这是因为，边框增加了宽度。所以总宽度比 100% 宽度多 4 个像素。因此，它相互堆叠。

添加 box-sizing 属性将解决问题。

http://jsfiddle.net/usdu7/30/