CSS - Float (box|property) (Layout)
About
Float is a property of a block box.
It shifts a box to the left or right on the current line and create a new position context.
If you don't need to support IE9 or lower, you can use flexbox, and don't need to use floated layouts.
The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side
Content flows down the right side of a left-floated box and down the left side of a right-floated box.
Management
Prohibit
You can prohibit an element to float with the clear property
No Overflow
The first usage of float was to let float an image (left or right) in a text that contains several paragraph. The floating element is then no more contained to allow this configuration.
You can prohibit an element floated to overflow its parent container with a clearfix
Example
Basic
.without-float{
font-style: italic;
border: 1px solid DeepSkyBlue;
}
.with-float{
float: right;
font-style: italic;
border: 1px solid DeepSkyBlue;
}
Without a float right property:
<div>
<div class="without-float">To the right</div>
<div>will stay in the normal flow</div>
</div>
<BR/>
With a float right property:
<div>
<div class="with-float">To the right</div>
<div>will go out the normal flow to the right</div>
</div>
containing block too narrow to contain the content
In the following document fragment, the containing block is too narrow to contain the content next to the float, so the content gets moved to below the floats where it is aligned in the line box according to the text-align property.
p { width: 10em; border: solid aqua; }
span { float: left; width: 5em; height: 5em; border: solid blue; }
<p>
<span> </span>
Supercalifragilisticexpialidocious
</p>
The effect of clear after a float element with padding
This example is to show the effect on the clear property if the next element has a padding.
When using a top fix navbar, if you set a clear on the heading, the padding value will be used and that's generally not what you want.
- The css property by class
.float-left { float: left; }
.top-navbar-correction {
padding-top: 50px;
margin-top: -40px;
z-index: -1;
}
.top-navbar-correction {
padding-top: 50px;
margin-top: -40px;
z-index: -1;
}
.clear-left {
clear: left;
}
- The HTML
<main>
<p>Fake paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="float-left">floated left box</p>
<h1 class="clear-left top-navbar-correction" dir="rtl">Header 1</h1>
<p>On the header 1 because there is a clear value to the left, the padding value will be used and the header is far away of the float element</p>
</main>
- Output:
Rule
The exact rules governing float behavior are given in the description of the float property.
A floated box is shifted to the left or right until its outer edge touches:
- the containing block edge
- or the outer edge of another float.
If there is:
- a line box, the outer top of the floated box is aligned with the top of the current line box.
- not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.
Any content in the current line before a floated box is reflowed in the same line on the other side of the float. In other words, if inline-level boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline-level boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.