Skip to main content

CSS Floats and Clears

CSS is the language that we use to style a website. It controls how your web pages look and feel. Among the various features of CSS, 'Floats' and 'Clears' are important concepts that help in designing complex website layouts. Floats allow elements to be pushed to the left or right, letting other elements wrap around them. Clears, on the other hand, are used to prevent floating elements from affecting other elements. In this tutorial, we will go through these concepts in detail.

Understanding CSS Floats​

The 'float' property in CSS is used to place an element to the left or right side of its containing element, allowing text and other elements to wrap around it. The elements after the floating element will flow around it. Here are the possible values for float:

  • Left: The element floats to the left of its container
  • Right: The element floats to the right of its container
  • None: The element does not float (this is the default value)
  • Inherit: The element inherits the float value from its parent

Here's an example of how to use float:

img {
    float: right;
}

In the example above, all images on the website will float to the right side of their parent element.

Clearing Floats​

While the 'float' property allows for some interesting layouts, it can also cause some unexpected results. This is where the 'clear' property comes in. The 'clear' property is used to stop the flow of floating elements. It can have the following values:

  • Left: No floating elements allowed on the left side
  • Right: No floating elements allowed on the right side
  • Both: No floating elements allowed on either the left or the right side
  • None: Default value. Allows floating elements on both sides
  • Inherit: The element inherits the clear value from its parent

Here's an example of how to use clear:

p {
    clear: both;
}

In the example above, all paragraphs will clear floating elements on both sides, effectively moving them below any floating elements.

The clearfix hack​

Sometimes, if a parent element contains only floated elements, it will collapse upon itself, as it has nothing to give it height. This is a common issue with floats. A common solution to this problem is the clearfix hack. This is a way of making the parent element to clear its child elements. Here's an example of a clearfix:

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

By adding the 'clearfix' class to a parent element, it will effectively clear its floats.

Conclusion​

CSS Floats and Clears are powerful tools that allow complex layouts to be created. Remember to use floats when you want elements to exist side by side and clear to control how elements move around those floating elements. The clearfix hack is a useful trick to keep in your toolbox for when parent elements are collapsing due to only containing floats. Happy coding!