float clear html

In web development, layout problems caused by floating elements are often encountered. Floating elements will break away from the document flow, causing the height of the parent element to collapse and other sibling elements to be affected. To solve these problems, we need to use float clearing.

The essence of floating clearing is to make the parent element contain the floating element and recalculate its own height. Common floating clearing methods include the following.

1. Use empty div tags to clear floats

This method is the earliest and most common float clearing method. Add an empty div tag at the end of the floated element and set its style to clear:both to clear the float.

.clearfix{
    clear:both;
}

By adding the clearfix class name to the parent element, it contains the floating element, thereby causing the parent element to recalculate the height.

But this method has the following disadvantages:

• It will add meaningless DOM elements
• Need to add additional styles
• It may be damaged Original layout

Therefore, try to use this method as little as possible unless there is no other better alternative.

2. Using BFC

BFC (block-level formatting context) is an important layout concept in the Web. BFC can wrap an element into an independent layout block with the following characteristics:

• The internal Boxes will be placed one after another in the vertical direction.
• The vertical distance of the Box is determined by margin. The margins of two adjacent boxes belonging to the same BFC will overlap.
• The BFC area will not overlap with the float box.
• BFC is an independent container on the page. External elements will not affect the Box inside it, and vice versa.
• When calculating the BFC height, floating elements also participate in the calculation.

By setting BFC to the parent element, the floating of the child element can be cleared.

Method 1:

.container{
    overflow: hidden;
}

Method 2:

.container{
    display: flow-root;
}

Although this method does not require adding additional DOM elements, it does require a certain understanding of the characteristics of BFC, and at the same time The impact of BFC on layout also needs to be considered.

3. Use pseudo elements to clear floats

Achieve the effect of float clearing by adding a pseudo element after the floating element. The specific implementation method is as follows:

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

By adding the clearfix class name to the parent element, the float can be cleared.

Although this method requires adding additional styles, it will not add meaningless DOM elements and will not affect the layout.

4. Using flex layout

Flex layout is a new layout method in CSS3. Using flex layout can easily solve some layout problems, such as horizontal centering, vertical centering, etc.

Using flex layout, you can also clear floats. The specific implementation method is as follows:

.container{
    display: flex;
    flex-wrap: wrap;
}

By setting the parent element as a flex container, the child elements will automatically become flex items and can be passed through flex-wrap Property controls line wrapping. Due to the characteristics of flex layout, the parent element will contain all child elements and recalculate its own height, thereby achieving the effect of clearing floats.

However, it should be noted that using flex layout may destroy the original layout, so it needs to be adjusted according to actual needs.

Summary

The above introduces common floating clearing methods. Each method has its advantages and disadvantages. Choose the most suitable solution according to your actual needs. But no matter which method is used, you need to pay attention to clearing the floats without destroying the original layout.

The above is the detailed content of float clear html. For more information, please follow other related articles on the PHP Chinese website!