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: Apply 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 keep their preset width, and the ultra-large sub-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

The second method is to enable the parent element to enclose its floating child element.

Method 3: add non-floating clear elements

Simply add a child element to the HTML Tag and apply the clear attribute to it. Because there is no default style and no extra space is introduced, the div element is suitable for this purpose.

Currently, the most popular method to clear floating data is to write a clearfix class:

. Clearfix: after {

Content :"";

Display: block;

Height: 0;

Visibility: hidden;

Clear: both ;}

. Clearfix {

* Zoom: 1}

* Zoom: 1; for hasLayout.

About hasLayout introduction click http://baike.baidu.com/link? Url = U_3B9202pp9xc357Ge9u7aS_T1WmUYZzVJ8ef4TYxqUjtrIZ-4GGbFT86csIfNHsSfpFQXlLFRlL0JjhPR7dEK

1. display: block: displays the generated elements in blocks.

2. height: 0; prevent the generated element content from damaging the height of the original layout.

3. visibility: hidden makes the generated content invisible and allows you to click and interact with the content that may be covered by the generated content.

4. content: ""; is to make the content part empty