css - 短い段落のみフローティング

Question

段落要素で奇妙な動作を引き起こしているいくつかの浮動要素を含むページがあります。つまり、非常に短い (画面幅よりも小さい) 段落だけが右に浮いています。それより長いと、段落が押し下げられます。問題のページは次のとおりです。

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

ページ上の要素は次のとおりです。

見出し (フローティング左)

サブページ リンク ボックス (フローティング右)

コンテンツ パラグラフ (フロート左)

ページを見るとわかるように、最初の段落だけが正しくフローティングされています (見出しの下と、サブページ リンク ボックスの周りで折り返されています)。

私はこれに本当に困惑しているので、どんな助けでも大歓迎です。ありがとうございました！

Answer 1

ルールを削除します。

.about-content p {
float: left;
}

これは実際には、段落がページから浮き上がるのを妨げています。仕様に記載されているように：

フローティング ボックスの外側の上部は、ソース ドキュメントの前の要素によって生成されたブロックまたはフローティング ボックスの外側の上部よりも高くすることはできません。