Three ways to surround floating elements

Method One: Apply Overflow:hidden to the parent element

In fact, the real purpose of the Overflow:hidden declaration is to prevent the inclusion element from being large by the oversize content. After applying Overflow:hidden, the containing element retains its set width, while the oversized child content is cut off by the container. In addition, Overflow:hidden has another effect, that is, it reliably forces the parent element to contain its floating child elements.

Method Two: Floating the parent element at the same time

The second way to induce the parent element to surround its floating child elements is to let the parent element float.

Method Three: Add non-floating purge elements

is simply to add a child element to the HTML tag and apply the clear property to it. Because there is no default style, no extra space is introduced, and the DIV element works well for this purpose.

Currently the most popular method of clearing floating, write a Clearfix class:

. clearfix:after{

Content: "";

Display:block;

height:0;

Visibility:hidden;

Clear:both;}

. clearfix{

* Zoom:1}

*zoom:1 is to start haslayout.

About Haslayout Introduction Click Http://baike.baidu.com/link?url=U_3B9202pp9xc357Ge9u7aS_ T1wmuyzzvj8ef4tyxqujtriz-4ggbft86csifnhssfpfqxllfrll0jjhpr7dek

1.display:block to make the generated elements appear as block-level elements

2.height:0 the content of the generated element destroys the height of the original layout.

3.visibility:hidden makes the generated content invisible and allows content that can be generated to be covered by clicks and interactions

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

Three ways to surround floating elements