1

http://zergxost.com/test.html

ご覧のとおり、十分なテキストがない場合、下の灰色の線が必要以上に高くなります。「記事」のヒットボックスに「ヘッダー」が含まれていない理由を誰か説明してもらえますか? そして、どのようにそれを修正しますか？ありがとう。

4

2 に答える 2

2

aoverflow: hiddenまたはclear: left宣言がありません。常に浮動オブジェクトをクリアするか、オーバーフローを非表示に宣言する必要があります (慎重に!)。

article {
  overflow: hidden;
}

または：

div#wrapper div.related {
  width: 100%;
  height: 960px;
  border-top: 1px solid #808080;
  margin-top: 20px;
  clear: left;
}

なぜ/どのようにoverflow: hidden機能するのか

ブロック レベルの要素を haveoverflow: hiddenに設定すると、実際にはブラウザがブロック要素を処理する方法を変更するように指示することになります。機能的には、ブラウザーに通常の要素 (フローティング要素を含む) を含めるように指示しました。通常、相対/絶対配置によってボックスの合計サイズを超えるもの、または非常に幅の広い画像は、ラッパーの幅にクリップされます。コンテナをまたぐドロップダウン領域は、overflow: hiddenそれらが入ったときにクリッピングされる可能性があります。

コンテナの最後の要素にoverflow: hiddenも、padding-bottom と margin-bottom が適用されます。

別の答え: https://stackoverflow.com/a/3416217/24950

于 2012-06-27T17:23:22.713 に答える
1

をクリアする必要がありますdiv#wrapper div.related。CSS に以下を追加してみてください。

div#wrapper div.related {
    clear: both;
}
于 2012-06-27T17:21:24.433 に答える