What are the ways to clear floats in css

The ways to clear floats in css include using the clear attribute, overflow attribute, clearfix class, parent element's clearfix class, pseudo-element to clear float, parent element's overflow attribute, and clear attribute combined with BFC. Detailed introduction: 1. Use the clear attribute, a simple and commonly used method to clear floats. By adding an empty block-level element after the floating element and setting the clear attribute for it, you can clear the previous floating effect and make it The elements below are laid out normally and so on.

The operating system for this tutorial: Windows 10 system, DELL G3 computer.

In CSS, float is a common layout technique that allows an element to break out of the normal document flow and float along the left or right side of its container. However, when floated elements have different heights or there is overlap between floated elements, it can cause layout confusion or unexpected side effects. To solve these problems, we can use different ways to clear floats. Below I will introduce some commonly used CSS methods to clear floats.

1. Use the clear attribute:

The clear attribute is a simple and commonly used method to clear floats. By adding an empty block-level element after a floating element and setting the clear attribute, the effect of the previous floating element can be cleared and the elements below it can be laid out normally. The clear attribute can be set to left, right, both, or none, which means clearing left floats, right floats, clearing left and right floats at the same time, or not clearing floats respectively.

Sample code:

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

Sample HTML code:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

2. Use the overflow attribute:

The overflow attribute is another commonly used method to clear floats method. By setting the overflow attribute to auto or hidden on the container of a floating element, you can trigger the BFC (block-level formatting context), thereby clearing the effect of floating. This is because BFC will include floating elements and calculate their height so that the container can be laid out normally.

Sample code:

   .clearfix {
     overflow: hidden;
   }

Sample HTML code:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

3. Use the clearfix class:

The clearfix class is a commonly used class for clearing floats Name, you can clear the floating effect by adding the clearfix class to the container of the floating element. This method usually uses the pseudo-class::after to add an empty block-level element and set the clear attribute for it.

Sample code:

   .clearfix::after {
     content: "";
     display: block;
     clear: both;
   }
   .clearfix {
     zoom: 1;
   }

Sample HTML code:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

4. Use the clearfix class of the parent element:

In some cases, we can Add the clearfix class directly to the parent element of the floating element to clear the floating effect. This method is similar to the above-mentioned clearfix class method, but adding the clearfix class to the parent element can more conveniently clear the floating effect of all child elements.

Sample code:

   .parent-element::after {
     content: "";
     display: block;
     clear: both;
   }

Sample HTML code:

   <div class="parent-element clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

5. Use pseudo elements to clear floats:

In addition to using the pseudo class::after , we can also use pseudo-element::before to clear floats. By adding an empty block-level element to the floating element's container and setting its content attribute to an empty string, BFC can be triggered to clear the floating effect.

Sample code:

   .clearfix::before,
   .clearfix::after {
     content: "";
     display: table;
   }
   .clearfix::after {
     clear: both;
   }
   .clearfix {
     zoom: 1;
   }

Sample HTML code:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

6. Use the overflow attribute of the parent element:

In addition to setting it on the container of the floating element In addition to the overflow attribute, we can also set the overflow attribute on its parent element to clear the floating effect. This method is similar to the overflow attribute method mentioned above, but setting the overflow attribute on the parent element makes it easier to clear the floating effect of all child elements.

Sample code:

   .parent-element {
     overflow: hidden;
   }

Sample HTML code:

   <div class="parent-element">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

7. Using the clear attribute and BFC:

In some cases, we can pass Combine the clear attribute with BFC to clear floats. By adding an empty block-level element after the floating element, setting the clear attribute for it, and then setting the overflow attribute of the container of the floating element to auto or hidden, you can use these two methods at the same time to clear the floating effect.

Sample code:

   .clearfix::after {
     content: "";
     display: block;
     clear: both;
   }
   .clearfix {
     overflow: hidden;
   }

Sample HTML code:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

In summary, CSS ways to clear floats include using the clear attribute, overflow attribute, clearfix class, and parent element The clearfix class, pseudo-element clear float, the overflow attribute of the parent element, and the combination of the clear attribute and BFC methods. In actual development, we can choose an appropriate method to clear floats based on specific needs and layout conditions to ensure that the layout of the page is correct and in line with expectations.

The above is the detailed content of What are the ways to clear floats in css. For more information, please follow other related articles on the PHP Chinese website!