Layout
clear
clear moves an element down below earlier floated elements instead of letting it sit beside them.
Syntax
none | left | right | both | inline-start | inline-endPreview
12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
display: block;
}
.box > :nth-child(2) {
clear: left;
}Controls
clearleft
12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
Values
none: may sit beside floats. This is the initial value.left/right: moves the element below left or right floats.both: moves the element below floats on either side.inline-start/inline-end: moves the element below floats on the start or end side of the line. In left-to-right horizontal text this matchesleft/right.
Things to watch
- It only clears floats that come before the element. Floats after it are not avoided.
- It applies to block-level elements and floats, not to inline elements.
- Placing a
clear: bothelement after floats makes the parent's height include them (the "clearfix" technique). Today, giving the parentdisplay: flow-rootis simpler.
The preview turns the box into a text sample with two items followed by text. The sample itself floats the first item to the left (this does not appear in the code), and clear is written on the second item. With none and right the second item sits beside the first; with left and both it moves below.