Three methods to enclose floating Elements

Method 1: Add overflow: hidden to the parent Element

In fact, overflow: the real purpose of the hidden statement is to prevent the inclusion of elements from being extended by ultra-large content. after overflow: hidden is applied, the contained elements still keep their preset width, and the oversized word content is cut out by the container. in addition, overflow: hidden has another function, that is, it can reliably force the parent element to include its floating child element.

Method 2: floating the parent element at the same time

Method 3: add non-floating clear elements

That is, add a non-floating child element to the parent element, and then clear the child element (that is, not displayed ).

There are two ways to add sub-elements,

① Simply add a child element to the HTML Tag and apply the clear attribute to the child element. No additional space occupation will be introduced because no default style exists.

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

② Add a class Clearfix to the parent Element

Clearfix:

.

. Clearfix: After {content: "."; display: block; Height: 0; visibility: hidden; clear: Both ;}

The use of these three methods should be tailored to local conditions. for example, overflow: hidden cannot be applied to top-level elements in the drop-down list. otherwise, the drop-down menu as a child element will not be displayed. the drop-down menu is displayed outside the parent element area, which is blocked by overflow: hidden. for example, you cannot use the "floating parent element" Technology for an element that has been centered by the auto margin. Otherwise, the element will not be centered.

Three methods to enclose floating Elements