Float and Clear

Back in the days of HTML4 web design Float was the go-to tool for writing page structures. In present day web design however, we primarily work with Flexbox or Grid, however we still rely on Floats for one task wrapping text onto images (unlike in this newspaper).

1. What is Float?

The float property pushes an element to the left or right of its container, so text and other objects (“inline” elements) can flow around it.

But when you float an element it is removed from the normal ‘flow’ of the page. Think of a timber logs floating in a river, the water (the text) has to move around to keep flowing.

The Values:

• float: left;: The element moves to the left. Text wraps around the right side.
• float: right;: The element moves to the right. Text wraps around the left side.
• float: none;: The default. The element stays where it is.

2. What is Clear?

The clear property is the “fix” for floats. Because floated elements are “floating” above the normal layout, they can sometimes overlap other elements or cause the parent container to collapse (shrink to zero height).

The clear property tells an element: “Do not sit next to a floated object. Move down below it instead.”

The Values:

• clear: left;: The element moves below any left-floated objects.
• clear: right;: The element moves below any right-floated objects.
• clear: both;: The most common use. It moves the element below all floated objects, regardless of side.

3. The “Collapse” Problem

Float isn‘t a reliable method of layout in the following sense: if you have a box (say a) that contains only floated elements, then a will have a height of 0 px (i.e. it will be considered to contain no elements).

The Solution: The Clearfix

Developers fix it by applying a “Clearfix” hack. You include a rule to be applied to the parent container which makes it safe to float a child inside it

CSS

/* The modern way to fix a collapsed container */
.container::after {
  content: "";
  display: table;
  clear: both;
}

Summary Comparison

Check out our resources!

• Bootstrap Templates: Explore our Bootstrap Projects section.
• Free E-Books: Download your Free E-Books here.