レイアウト
clear
clear は、前にある回り込み（float）の要素の横に並ばず、その下まで下げて置くように指定します。
構文
none | left | right | both | inline-start | inline-endプレビュー
12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
display: block;
}
.box > :nth-child(2) {
clear: left;
}コントロール
clearleft
12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の意味
none：回り込みの横にも並べます。初期値です。left/right：左・右に回り込んだ要素の下まで下げます。both：左右どちらに回り込んだ要素の下にも下げます。inline-start/inline-end：行の始まり・終わりの側に回り込んだ要素の下まで下げます。左から右に書く横書きではleft/rightと同じです。
気をつけること
- 避けるのは、
clearを書いた要素より前にある回り込みだけです。後ろにある回り込みは避けません。 - ブロックの要素と、回り込んだ要素に効きます。インラインの要素には効きません。
- 回り込みの後ろに
clear: bothの要素を置くと、親の高さが回り込みを含むようになります（clearfix と呼ばれる書き方）。今は親にdisplay: flow-rootを書くほうが簡単です。
このページのプレビューでは、箱を文章の見本にして項目を 2 つと文章を並べています。見本の側で 1 番目の項目を左に回り込ませてあり（コードには出ません）、2 番目の項目に clear を書いています。none と right では 2 番目の項目が 1 番目の横に並び、left と both では下に回ります。