Floats and Clearfix in CSS

« Prev Next »

CSS float property was designed to work around multiple column layouts and CSS clearfix is used to provide a fix to the layout, which floats caused.

CSS float property places an element on the left or right side of a container allowing text or other elements to wrap around it.

 

Syntax

selector {
  float: value;
}

value: Defines the direction in which the element should float. Common values include:

 

  • left: Floats the element to the left.
  • right: Floats the element to the right.
  • none: Removes any floating behavior (default).

floats-and-clearfix-in-css

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      width: 100%;
    }

    .box {
      float: left;
      width: 30%;
      margin: 10px;
    }

    .box1 { background-color: lightblue; }
    .box2 { background-color: lightgreen; }
    .box3 { background-color: lightcoral; }
  </style>
</head>
<body>

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

</body>
</html>
Run ›

Clearfix

As float places the element outside of the normal flow of the document, several layout problems may arise. For instance, floated elements are not contained within their parent. The clearfix method is used to clear floats, thereby restoring the normal flow of layout.

Syntax

.selector::after {
  content: "";
  display: table;
  clear: both;
}
  • ::after: This pseudo-element is used to insert content after the floated elements.
  • content: "";: Generates an empty string that forces the ::after pseudo-element to be rendered
  • display: table;: Forces the pseudo-element to act as a block-level element.
  • clear: both;: Ensures that the ::after pseudo-element clears any previous floating elements, effectively making the parent container wrap around its floated children.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      width: 100%;
      background-color: lightgray;
    }

    .box {
      float: left;
      width: 30%;
      margin: 10px;
      padding: 20px;
    }

    .box1 { background-color: lightblue; }
    .box2 { background-color: lightgreen; }
    .box3 { background-color: lightcoral; }

    /* Clearfix */
    .container::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.