css - フロートをスタックさせる境界線

Question

次のコードは、2つの素敵な列と1つのフッターを生成します。

<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;}

では、なぜ境界線を追加すると、2つの列が突然重なり合うのでしょうか。

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

参照-フィドル： http： //jsfiddle.net/usdu7/19/

score 4 · Accepted Answer

これは、ボーダーが幅に追加されるためです。したがって、合計幅は 100% 幅よりも 4 ピクセル多くなります。だから、それはお互いに積み重なります。

box-sizing プロパティを追加すると、問題が解決します。

1 に答える 1