clear: both;
コンテナが使用するとき(または左/右)に、コンテナ内のフロート要素のバグに遭遇しました。Chrome(Safariではない)では、最初のfloat要素は正しく配置されますが、後続のすべての要素は親要素の上部マージンを継承しているように見え、行から外れます。
問題のあるコードは次のとおりです:http://jsfiddle.net/peterjmag/3zJey/1/
トグルリンクを試して、違いを確認してください。また、margin-top
onのさまざまな値を試してください#product-listing
。
他のブラウザを使用している方のために、私にとってフィドルは次のようになります(Mac用のChrome 25.0.1364.160):
clear: both;
Chromeでこの動作が発生するのはなぜですか?CSS 2.1の仕様によると、clear
プロパティは、対象の要素内ではなく、ドキュメントの前半に表示される浮動要素にのみ影響を与える必要があります。
(もちろん、コンテナーdivのclearプロパティを必要としない、ドキュメント内の以前の要素をクリアするためのより最適な方法が他にもあることを知っています。これが発生する理由を理解しようとしているだけです。)