Float | Learning to Code

Introducing CSS Float

The CSS float property was originally intended to replace the deprecated align attribute for <img /> tags.
By floating an element to the right or the left, content could then flow around the side of the element.
Wrapping of content always starts from the top of the floated element.
In much the same way that tables were appropriated for layout purposes, float has been appropriated for layout purposes in ways far beyond the original intention.
Results and implications of floating an element:
- Floating the element automatically renders it as a block box (so it accepts all box model properties).
- Floated elements do not automatically set the height of whatever element is containing them.
- You can force a container element to use the heights of its floated child elements if the container is instructed to overflow: auto.
- Floated elements ignore the display property, unless you are using display: none to remove the element from the page entirely.
Float can be used to line up block-level elements left-to-right or right-to-left.
If you float elements to the right you will notice that they render in the opposite sequence of how you have them in the code. This is because the first element is to the far right, the next element is to its left, etc. This may require you to flip the sequence of the elements in your HTML code.

CSS Properties Involved in Float

Property	Usage and Effect	Values	Details & Recommendations
float	Moves an element to the left or right so other content can flow around it.	`left` `right` `none` (the default)	By default every element is in the normal document flow, which is `float: none`. There is no `center` value; floats only move `left` or `right`. Multi-column layouts will float all their columns the same direction (usually left), so they line up side-by-side.
clear	Ensures that a non-floated element clears a floating element, rendering after either left, right, or both sides are clear of floated elements.	`left` `right` `both` `none` (the default)	The floated element comes first in the code, before the element instructed to `clear`. If you have the floated element located after the cleared element, the floated element will render below it and they will not be side-by-side.

Floating Navigation Bars

Most websites have at least one navigation bar. Some will have multiple navigation bars, reflecting global navigation (always-present navigation) as well as varying levels of local navigation (navigation specific to a certain area of the website). Sometimes navigation is split and appears in multiple places in the layout (e.g., left as well as top, left as well as bottom).
Fundamentally, a navigation bar is a list and our code should reflect that, so that we are coding the page in the most semantically accurate manner.
For vertical navigation bars there is no need for float, because lists automatically move down the page.
Horizontal navigation bars are another matter, because list items do not typically render from left to right. This is where the float property is useful.
The key is to float all the list items in the same direction, so that they line up properly.
Be sure to float the list items rather than the anchors; old browsers will render poorly if the anchors are floated (the rendering is similar to stairsteps).
It is also a good idea to disable margins and padding on the list items and the <ul></ul> or <ol></ol> in use (typically navigation bars use <ul></ul> because there is not an implicit or natural sequence in most navigation bar content).
- This is necessary because browsers differ in where they assign margin and padding for lists.
- Once those values have been set to zero, you then have a blank slate for assigning values that will be applied consistently cross-browser.
Note: An alternative to floating list items is to have them set to display: inline-block. However, you may find that floating creates less of a hassle because white space is ignored (inline elements are impacted by white space in the code).

Floating a Navigation Bar to the Left Example

See the Pen Float Navbar Left by Jason Withrow (@jwithrow) on CodePen.

Floating a Navigation Bar to the Right Example

See the Pen Float Navbar Right by Jason Withrow (@jwithrow) on CodePen.

Floating Areas of a Layout

Three Column Floated Layout Example

See the Pen Three Column Floated by Jason Withrow (@jwithrow) on CodePen.

Considerations with the Three Column Layout

Since this layout is intended to fill the browser window we work in percentages, but we are also using fixed pixel width borders so calc() is necessary.
Some trial and error is always needed for these. If we had exceeded the available width of the containing block (the browser window / <body>), the far-right floated element wraps below the other floated elements.

Two Column Floated Layout with Clearing Div Example

See the Pen Two Column Floated with Clearing Div by Jason Withrow (@jwithrow) on CodePen.

Considerations with the Two Column Layout

Since there were fewer floated columns I avoided the use of calc() by stopping the percentage-based widths well enough short of 100% that, no matter what, the pixel-based borders never exceeded the total width of the browser window.

Advantages of Floating Elements

Floated elements will move below each other if there is insufficient space
- Sometimes this behavior is what we want; the alternative would be to trigger a horizontal scrollbar if the floated elements did not budge.
May be preferable to flexbox and grid in some cases
- Flexbox and grid are newer ways of laying out web content, but sometimes an old approach like float behaves differently, and that can be a good thing. Just because an approach is dated doesn't mean it lacks all utility.
- In one case, where I was trying to get print output to lay out properly, with boxes flowing side-by-side and not getting cut off when they crossed page boundaries, only float would render as desired.

Disadvantages of Floating Elements

Extraneous HTML code may be needed for clearing floats
- These are typically <div></div> elements that only exist to clear the floats, so that content below the <div></div> is rendering as expected and is not shifting to the right or left sides (which it would do if it was directly following a floated element).
- Another approach relies upon generated content using ::after to output a period character after the floated content (content: ".")
  - The period is given height: 0 and visibility: hidden so it is not visible, and is displayed as a block so it can accept the height setting. It also has clear: both applied to it.
Expect issues with percentages that total 100% and/or layouts mixing percentages and fixed values - calc() and trial-and-error may be needed
- Since everything has to be converted to pixel values before being rendered, multiple floated elements that total 100% will present problems at various window sizes.
- Sometimes the percentages will result in pixel values with decimals that round up, totaling a greater number of pixels than what the containing block will allow. At that point one of the floated elements will move below the others.
- Mixing percentages and fixed values also introduces uncertainty regarding the final pixel total (the final horizontal number of pixels used).

Troubleshooting Float Issues

Develop the layout concurrently in all target browsers, especially if it is complex
- Code part of it and make sure all the browsers are rendering properly before moving on to the next part of the layout.
- Otherwise tracking down the place in the code where the layout fell apart is harder to accomplish.
Assign widths to all floated elements
- While not always necessary, this can prove essential if floated elements are wrapping to new lines.