まず、この例は:nth-child、Chrome や FireFox などの をサポートするブラウザでのみ機能します。奇数番号のリスト項目が左にフロートして左にクリアされ、偶数番号のリスト項目が右にフロートして右にクリアされる順序付けられていないリストがあります。そのようです：
HTML:
<ul class="waterfall">
<li style="height: 100px;">1</li>
<li style="height: 200px;">2</li>
<li style="height: 50px;">3</li>
<li style="height: 100px;">4</li>
<li style="height: 200px;">5</li>
<li style="height: 50px;">6</li>
<li style="height: 50px;">7</li>
<li style="height: 50px;">8</li>
</ul>
CSS:
.waterfall {width:302px;}
.waterfall LI {
min-width: 150px;
background-color: #CCC;
margin-top: 2px;
}
.waterfall LI:nth-child(odd) {
float: left;
clear: left;
text-align: right;
}
.waterfall LI:nth-child(even) {
float: right;
clear: right;
text-align: left;
}
ゴール：
奇数番号のリスト アイテムはすべて左にフロートし、2 ピクセルの余白を除いて隙間なく積み重ねます。右にフロートする必要があることを除いて、偶数番号のリスト項目にも同じことが当てはまります。
一言で言えば質問：
この例では、LI #5 が LI #4 の上に表示されず、LI #8 が LI #7 の上に表示されない正確な理由について、私は混乱しています。つまり、LI #5 が LI #2 をクリアし、LI #8 が LI #5 をクリアするのはなぜですか? また、LI #3 が LI #2 をクリアしないのはなぜですか?
TL;DR
これまでの私の考えは、やや決定的ではありません。最初の要素がマークアップで後で定義されている場合、ブラウザは要素の上部が別の要素の上部に表示されることを望んでいないようです。本当？
フロート要素は線上に配置され、その線に収まらないフロート要素は新しい線にジャンプしてそこから流れることを理解しています (絶対配置要素のフリーフローの概念とは対照的に)。言い換えれば、フロート要素はドキュメント フローから削除されますが、絶対配置要素ほど文字どおりではありません。フロート要素は、それが開始されたどの行に対しても相対的に配置され、ドキュメント フロー内のスペースを占めるためです。では、浮動要素がぶら下がっている次の「行」はどのように決定されるのでしょうか? この例では、LI #3 が LI #2 をクリアしないのに、LI #5 がクリアするのはなぜですか?
私が探していないもの：
マークアップを変更するか、フロートを放棄するか、JavaScript を使用することで、このレイアウトを機能させる賢い解決策です。私はそれをすべて行う方法を知っています。フロートの神秘的な方法を教えてもらいたいだけです。