边界导致浮动堆叠

Question

以下代码生成两个漂亮的colunms和一个页脚：

<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

这是因为，边框会增加宽度。因此总宽度为4像素，超过100％宽度。所以，它堆叠在一起。

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

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