html - CSS Float Clear Both 50% width Div with Border

Question

HTML

<div>
    <div class="leftInRow5050 squareTopLeft">1</div>
    <div class="rightInRow5050 squareTopRight">2</div>
    <div style="clear: both;"></div>
</div>
<div>
    <div class="leftInRow5050 squareBottomLeft">3</div>
    <div class="rightInRow5050 squareBottomRight">4</div>
    <div style="clear: both;"></div>
</div>

CSS

.rightInRow5050{
    width:50%;
    display: inline-block;
    float:right;
}

.leftInRow5050{
    width:50%;
    display: inline-block;
    float:left;
}
.leftInRow5050.squareTopLeft{
    height: 35%;
        border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}

.rightInRow5050.squareTopRight{
    height: 35%;
    border-left: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}

.leftInRow5050.squareBottomLeft{
    height: 35%;
    border-right: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;  
}

.rightInRow5050.squareBottomRight{
    height: 35%;
    border-left: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;  
}

为什么上面的代码无法创建 2X2 <div>矩阵？它给了我标准的 1px 问题，其中 <div>是彼此相克吗？

Answer 1

如果 div 有边框，而这就是它的问题，试试这个:

box-sizing:border-box;