Layout
float
float pushes an element to the left or right end of the line and lets the following text wrap around it.
Syntax
left | right | none | 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) {
float: left;
}Controls
floatleft
12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
Values
none: does not float. This is the initial value.left/right: moves the element to the left or right end and wraps the following text around the other side.inline-start/inline-end: floats to the start or end side of the line. In left-to-right horizontal text this matchesleft/right; in vertical or right-to-left text it follows the writing direction.
Things to watch
- Only the text in the lines wraps. The boxes of following blocks (their backgrounds and borders) run underneath the floated element.
- Floated elements do not count toward their parent's height. A parent that holds only floats collapses to a height of 0, so give the parent
display: flow-rootto make it contain them. - Inline elements such as
spanare treated as blocks once floated, sowidthandheightstart to apply. - It has no effect on flex or grid items, or on elements with
position: absolute/fixed.
The preview turns the box into a text sample with two items followed by text, and writes float on the second item. The box scrolls (overflow: auto), so the floated item stays inside it.