Clear Floating Clearfix

Source: Internet
Author: User

CSS clears floats with Clearfixmore 2013/11/4 Source: CSS Learning PageView: 11901Learning Tags: CSS clearfix This article guide: Write CSS is always floating and worry, if used floating, the floating parent will not follow the height of the floating box increases and increase, in Firefox and other standards-compliant browser, if there is a div as an external container, Internal Div If the float style is set, the outer container div cannot be stretched because it has no clear inside. We can use Clearfix to clear the float at this time.

What is. Clearfix

CSS CodeCopy
{  content: "";  Display:block;  Clear:both;  {  zoom:1;} <div class= "Clearfix" >  <div class= "floated" ></div></div>

The above code illustrates:

CSS CodeCopy
{           content: ".";     / * content is "." is a full stop in English. can also not write. */    Display:block;   / * This element is added as a block-level element. */    Clear:both;     / * Clear left and right side floats. */    Visibility:hidden;      / * Visibility is set to hidden. Pay attention to it and display:none; there is a difference. Visibility:hidden, still occupy space, just can't see it; * *    line-height:0;    /* This is for IE6, because IE6 does not support: After pseudo class, this magical zoom:1 allows the elements of IE6 to be cleared floating to wrap inside elements. */

The above code is the. Clearfix definition and application, simply say. Clearfix principle:

1, in IE6, 7 zoom:1 will trigger the haslayout, so that the element closed inside the float.

2, under the standard browser,. Clearfix:after this pseudo-class inserts a Clear:both block-level element after the element applied to the. Clearfix to clear the float.

3, when the need to clear the float, just write a. Clearfix, then add the Clearfix class name to the element that needs to be cleared.


HTML CodeCopy
<style type= "Text/css" > /* all major browsers support: after pseudo elements. */. Clearfix:after{content: "."; Display:block;height:0;clear:both;visibility:hidden}. Clearfix{*+ height:1%;} /* do not know what is the use, do not add IE7 there is no problem * *. box{ Background: #111; width:500px; Position:relative;} . L{float:left; background: #333; width:200px; height:100px;} r{float:right;background: #666; width:200px; height:200px;} s{width:100px; Height:100px;background: #999;p osition:absolute;right:-50px;;} </style> <div class= "box Clearfix" > <div class= "L" >left</div> <div class= "R" >right</div> <div Class= "s" >absolute</div> </div> </body>      

Clear Floating Clearfix

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.