CSS Float | CSS Clear

CSS Float Property

The CSS float property controls the positioning and formatting of content on the page. Its most common use is to wrap text around images. However, you can use this property to wrap any inline elements around a defined HTML element, including lists, paragraphs, divs, spans, tables, Flash movies, and blockquotes.CSS float is a property that forces any element to float (right, left, none, inherit) inside its parent body with the rest of the element to wrap around it. This property can be used to place an image or an element inside its container and other inline elements will wrap around it.

For eg. : Images in newspaper and articles are placed in certain position with the rest of the content wrapped around it.

Note: One should keep in mind that this can only be applied to float the element horizontally (i.e. right or left ) not vertically. And Absolutely positioned elements ignore the float property! 

Syntax :

float: left | right | none | inherit;

The float property can be specified with any of the following values:

• None (default): The element does not float. It is simply displayed where it occurs in the text.
• Left: The element floats to the left of its container.
• Right: The element floats to the right of its container.
• Inherit: The element inherits the float value of its parent.

Notice that there are no property values for center, top, and bottom. That’s because you can’t float elements to the center, top, or bottom of the page — only left or right.

What Does Float Mean?

To understand the purpose and origin of float, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called “text wrap”. Here is an example of that.

img {

  float: right;

}

<h2>CSS Float Property: Right Value</h2>

<p></p>

  <img

    src="pic_trulli.jpg"

    alt="Trulli"

    style="width: 250px; height: 170px; margin-left: 15px;"

  />

  In this example, the CSS float property is defined by the right value. That

  tells the browser two things. The first is that the image floats to the right

  in the paragraph. The second is that the text in the paragraph wraps around

  the image. Notice that the CSS includes a type selector to target the image,

  which is contained in the paragraph.

</p>

Here’s the result:

Compare how the image appears on the page below when the float property is not applied.

Our HTML page with multiple images to show the float effect in it.

See the Pen CSS Float by PANKAJ (@pankkap) on CodePen.

CSS Clear

The float property can cause layout issues. Consider what happens if a containing element, like a <div> element, is too small to contain the floated element. When this happens, the floated element will extend beyond the bounds of its containing element and disrupt other parts of your page.

Issues like this can be fixed using the clear property in CSS. This property lets you "clear" floated elements from the left side, right side, or both sides of an element.

The clear property can be specified with any of the following values:

• None (default): Floating elements are allowed on both sides of the cleared element.
• Left: No floating elements are allowed on the left side of the cleared element.
• Right: No floating elements are allowed on the right side of the cleared element.
• Both: No floating elements are allowed on the either side of the cleared element.
• Inherit: The element inherits the clear value of its parent.

The clear property is directly related to floats. If the element can fit horizontally in the space next to another element which is floated, it will. Unless you apply clear to that element in the same direction as the float. Then the element will move down below the floated element.

Here’s a simple example of a layout constructed with floats, which could be problematic for the footer:

But by clearing the footer element, the layout snaps into place:

#footer {

  clear: both;

}

See the Pen CSS Clear by PANKAJ (@pankkap) on CodePen.

In this case, clear: both; was used to ensure the footer clears past elements that are floated in either direction. But you can also clear either left or right in which case the element will move below elements that are floated that direction, but not the other.

A common way to clear floats is to apply a pseudo element to a container element which clears the float.

.fotter:after {

  content: '';

  display: block;

  clear: both;

}

}Apply it to any parent element in which you need to clear the floats.