What are the several ways to clear floats in css3

Method: 1. Set the "clear:both" style in an empty div tag to clear the float; 2. Add a ":after" pseudo-element to the parent element to clear the float of the pseudo-element to clear the float; 3. Set the overflow style to the parent element, and the float can be cleared even if the attribute value is not visible.

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What are the several ways to clear float in css3

Float (float) can control the floating box to move left and right until it encounters another floating box or the containing box on its outer edge. The floating box does not belong to the ordinary flow in the document flow. When the element is floated, it will not affect the layout of block-level elements, but will only affect the layout of inline elements.

At this time, the normal flow in the document flow will show that the floating box does not have the same layout mode. When the height of the containing box is smaller than the floating box, "height collapse" will occur:

The height of the parent element in the above picture is caused by padding The effect is that the parent element has no height set.

When the height of the parent element is not set:

If the child element in the parent element is not set to float, the height of the parent element will be automatically expanded, and the height value will appear;

If the child element in the parent element is set to float, the height of the parent element will not be automatically expanded, and there will be no height value.

Obviously there are some problems after setting the float in this way, such as:

The margin of the parent element is affected, and it cannot be centered up, down, left, and right.

If the height is not set for the parent element , the height of the parent element is not expanded after floating, then the parent element will not be displayed on the display.

How to clear floats in css? What are the several ways to clear floats?

(1) Use clear:both to clear floating

Put an empty div tag in the code, and then set clear:both to this tag Clear the effect of floating on the page. Its advantages are simplicity, convenience and good compatibility, but it is generally not recommended to use this method because it will cause structural confusion and is not conducive to later maintenance

<div style="clear: both"></div>

(2) Use the pseudo element: after Clear the float

Add an :after pseudo-element to the parent element, and achieve the purpose of supporting the height of the parent element by clearing the float of the pseudo-element

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

(3 ) Use the overflow attribute of CSS

When the overflow style is set to the parent element, whether it is overflow:hidden or overflow:auto, the float can be cleared as long as its value is not visible. The essence is to construct a BFC, so as to achieve the effect of supporting the height of the parent element

.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}

(Learning video sharing: css video tutorial)

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