A simple understanding of how to clear floating. -DD dog

A simple understanding of how to clear floating. -When DD dogs learn css, float can greatly facilitate our layout style. However, as we come along, we will also encounter the problem of clearing float, let me talk about some of my simple ideas.

First, why do we need to clear the float, because floating will make the label out of the Document Stream, affecting both the front and back elements and the parent element (border, content.

The following describes how to clear a float:

1Define height

Add a fixed or minimum height for the parent element, because when the child element is set to floating, the border of the parent element cannot be opened after it is detached from the document stream. So we can add

"Height:" or "min-height.

The advantage of this method is that it is easy to get started and easy to understand.

The disadvantage is that the height must be determined in detail and is not flexible.

2Use clear: both

Add clear: both to the end label of the parent element. Add a blank sign to the parent element to declare that the floating around the element is ignored.

Html

Css. clear {

Clear: both

}

This method is simple and convenient.

The disadvantage is that adding many empty tags is the most taboo in programming, which will also cause trouble for future modifications.

3Use overflow: hidden

Add overflow: hidden to the css for the parent element. Now let's take a look at what they mean. overflow: overflow, hidden: Clear. That is, clear the overflow part and do not display its content. It is easy to understand that using this will carry floating attributes.

.

. "Class Name "{

Overflow: hidden

}

This method has the following advantages: less code and fewer errors.

The disadvantage is that it cannot be used with position or define height at the same time, because it is used to clear unnecessary parts.

The above three methods are the ones I learned when I was a beginner in css clearance float. As a web player with limited capabilities, the solution to the problem may not be the best. You are welcome to propose them, thank you.