Three methods to enclose floating Elements

Source: Internet
Author: User

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: 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.