Css 水平对齐两个div

为什么在下面的代码中B框围绕着A框？盒子上的浮动不是应该使它们水平对齐吗

<div style="width:300px">
    <div style="width:45%;margin:5px;float:left;border:1px solid black">
    <p>Box A</p>
    This is just content for box A.
    </div>
    <div style="width:45%;margin:5px;border:1px solid red">
    <p>Box B</p>
    This is just content for box B.
    </div>
</div>

方框A

这只是方框A的内容。
方框B

这只是方框B的内容。

---

通过在第一个div中添加

float:left

，可以有效地将其从页面流中删除，但框B不会从页面流中删除。但是，框B的文本不能在框A中运行，所以它只是“包围”它，正如您在JSFIDLE中看到的那样。您应该做的是同时使用浮动框B，并在之后（或）应用清除，以便您的两个div不会被后面的div覆盖：

<div style="width: 300px;">
    <div style="width: 45%; margin: 5px; float: left; border: 1px solid black;">
    <p>Box A</p>
    This is just content for box A.
    </div>
    <div style="width: 45%; margin: 5px; float: left; border: 1px solid red;">
    <p>Box B</p>
    This is just content for box B.
    </div>
</div>
<div style="clear: both;"></div>

方框A

这只是方框A的内容。
方框B

这只是方框B的内容。

---

顺便说一下，使用类可能会有所帮助。

使用float:left；用于水平对齐