css - 只有短段落浮动

Question

我有一个页面，其中包含几个浮动元素，导致段落元素出现奇怪的行为。也就是说，只有非常短（小于屏幕宽度）的段落向右浮动。再长一点，段落就会被压下。这是有问题的页面：

http://staging.pacificlean.net/about-pacificlean/pacificlean-of-washington/

页面上的元素是：

标题（向左浮动）

子页面链接框（右浮动）

内容段落（向左浮动）

正如您在页面上看到的，只有第一段正确浮动（在标题下方并环绕子页面链接框）。

我对此感到非常困惑，因此，任何帮助都将不胜感激。谢谢！

Answer 1

删除规则：

.about-content p {
float: left;
}

这实际上是防止段落在页面上浮动。正如规范所述：

浮动框的外部顶部不得高于源文档中早期元素生成的任何块或浮动框的外部顶部。