Talking about the floating problem of CSS

Source: Internet
Author: User

How the Float Works

Floating elements leave the document stream and do not occupy space. The floating element stops at the border that contains its bounding rectangle or floating element.

Issues that may arise from floating elements

1. The height of the parent element cannot be stretched, affecting elements that are siblings of the parent element

2. Non-floating elements with the same sibling as the floating element will follow

3. The element before the element also needs to float unless the first element floats, otherwise it will affect the display structure of the page

What is the solution to clear float?

There are generally three ways to do this.

1. Clear floating with an empty label

Add an empty label after all the floating labels and define the CSS properties Clear:both

Contrast chart: Div is not being unfolded

Add an empty label, the disadvantage is to add a non-semantic tag

<styletype= "Text/css">Html,body,div{margin:0;padding:0;}. Box{Border:1px solid #333;}P{Border:1px dotted #333;}. Box img{float: Left;}. Box P{float: Left;}. CB{Clear:both;}    </style></Head><Body><Divclass= "box"><imgsrc= "1.jpg"width= "50px"Height= "50px">    <P>One</P><!--add <div class= "CB" here ></div> -</Div></Body>

Of course, if the elements behind the floating element you do not need to float, you can add a clear:both to it, which is also good.

2. Using overflow

Adds a CSS property to the parent element tag that contains the floating element, Overflow:hidden or auto; Zoom:1, where zoom:1 is used for compatibility with IE6 to trigger Haslayout

3. Use the after pseudo-object to clear the float.

However, this method is only applicable to non-IE browser, but also note that when using it, remember to set the height:0 for the pseudo-object that needs to clear the floating elements; Otherwise, the object will be a few pixels higher than it actually is.

html,body,div{margin:0;padding:0;} . box{border:1px solid #333;} p{border:1px dotted #333;} . box Img{float:left;} . box P{float:left;} . Cb{clear:both;} . Clearfix{display:inline-block;/*zoom:1;*/}/* for IE; or use Zoom:1 to trigger the haslayout; */. Clearfix:after{content: "."; display:block; height:0; visibility:hidden;clear:both;} </style></Head><Body><Divclass= "box Clearfix"><imgsrc= "1.jpg"width= "50px"Height= "50px"> <P>One</P></Div></Body>

4. It floats the parent element of the floating element, but the whole is floating, so it's not recommended.

5. There is also a direct to the floating element to add attribute display:table;

FF Chrome and other support, IE6/IE7 test show does not support ~ so also have to trigger haslayout, plus zoom:1 or Display:inline-block bar

Talking about the floating problem of CSS

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.