Three methods to enclose floating elements and three methods to enclose floating Elements

Three methods to enclose floating elements and 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.

What is a floating element in css?

Go to this website and check the details!
Www.w3school.com.cn/..ng.asp

Css floating element issues

First, the first selector is for the hack of IE6 and IE7, that is, only IE6 and IE7 can be identified. setting height is used to trigger the haslayout attribute of html elements with clearfix classes, in this way, the parent element can automatically cover floating child elements to achieve clear floating effect;
The second selector uses the "after" pseudo class, which is not supported by IE6 and IE7. This is a clear floating style for other browsers ,: the after pseudo-class is to create a pseudo element after an element with the clearfix class. This content refers to the content in the pseudo element. Here, because it is only used for clear floating, it can be filled with everything, however, this attribute must be available, otherwise it will become invalid. display: block; converts this pseudo element to a block-level element, because it is a row element by default, clear: both; of course, it is the core attribute. It is used for clear floating, height: 0; indicates that the height is zero, and visibility: hidden; hiding is to not affect the layout of other elements, font: sans-serif; this syntax is a bit incorrect, because the font statement must write at least two values at the same time. One value indicates the font size, and the other is indicating the font type, such as font: 15px sana-serief; of course, font is a short form of all font attributes, such as font width. Which of the following statements can you use Baidu? Clear floating has no effect.