Several ways to clear floats in css

Several methods of clearing floats in CSS

In CSS, floating elements are a frequently used layout method, but floating elements may also cause problems such as height collapse of parent elements and overflow of child elements. Therefore, You need to use the method of clearing floats.

The following introduces several practical methods of clearing floats:

1. Use the clear attribute

The clear attribute can set the floating state of an element. It has the following options: Value:

1. clear: none (default value) means that the element does not clear the float;
2. clear: left means that the left floating element is not allowed under the element, that is, the left float is cleared;
3. clear: right means that no floating elements on the right are allowed below the element, that is, the right float is cleared;
4. clear: both means that no floating elements are allowed below the element, that is, the left and right floats are cleared at the same time;

For example: The following code implements a clear floating effect:

<div class="parent">
  <div class="child left"></div>
  <div class="child right"></div>
  <div style="clear:both;"></div>
</div>

In the above code, we add an empty div tag to the last line, and then set its style The clear attribute value is both. Since the width and height of this element are not set, it is just an empty label, so it will not affect the page layout, but it can clear the floating effect.

Improve the above code, you can abstract the empty div tag into a class, the code is as follows:

<div class="parent">
  <div class="child left"></div>
  <div class="child right"></div>
  <div class="clear"></div>
</div>

.clear {
  clear: both;
  height: 0;
  overflow: hidden;
}

In the above code, we add height: 0; overflow: hidden to the clear class through style ; Hides this empty div tag so that it does not affect the page layout.

2. Use pseudo elements

In CSS3, you can use pseudo elements to clear the floating effect, as shown below:

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

In the above code, we add Create a clearfix class, and use the pseudo element: after to clear the floating effect, and set content: ''; display: table; and clear: both; to clear the floating effect.

3. Use the overflow attribute

Setting the overflow attribute of the parent element to hidden, auto or scroll can also clear the float, as shown below:

.parent {
  overflow: hidden;
}

.parent {
  overflow: auto;
}

.parent {
  overflow: scroll;
}

The above three styles Settings can clear floating, but when the height of the floating element exceeds the parent element, scroll bars will appear, affecting the beauty and usability of the page.

4. Use BFC (block-level formatting context)

When an element has the BFC attribute, it will wrap the floating element inside to achieve the effect of clearing the float. The syntax of BFC is as follows ：

.element {
  display: block; /* 块级元素 */
  overflow: auto; /* 触发BFC */
}

In the above code, we set the display:block; overflow:hidden; or overflow:auto; attribute to the element to be cleared and floated, thereby triggering the BFC effect.

To sum up, we can choose different methods of clearing floats according to actual needs to achieve beautiful and reasonable layout effects.

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