css--how to clear floating

As we all know, usually in the writing of HTML code, it is unavoidable to use the float style, so that if you do not clear the float, then there are floating elements of the parent element container will not automatically open the element. In other words, if you're writing code, it's a div. A (this means that there is a div in the page and that it is named class= "A") contains two or more sub-element Div. B,div. C,div. D (Here I take three for example), and at this time Div. B and Div.c float, and DIV.D does not make any floats, you can see the parent element div.a height only by div.d to open its height, if you will div.a all the child elements to float, when you do not clear the inner float, this causes the floating parent element DIV.A cannot automatically open its own height. That is: When an element is floating, its parent element will not contain the floating element if it is not closed, because the floating element is detached from the document stream. Let's take a look at the examples of these two types of current images:

HTML Code:

  <class="Demo A" >    <class="demob demofloat" >float left</< class="Democ demofloat" >float right</<class="Demod demofloat" >not float </</div>               

Add some basic styling to the above:

   . demo{Width 300px; border: 1px solid red;  .demofloat { Background: Green; margin: 0;  .democ { Background: orange;  .demod { Background: lime; border: 2px solid blue;                

Let's take a look at the first type, Div. B and Div.c float, while DIV.D does not float

{   float:float:}  

Effect:

Obviously tell us two points: one: Div. B and div.c two div after floating, completely out of the document flow, not by its parent element A is included, and the other: because of the div. D does not float, at which point the position of the div,b and div.c in the document stream is DIV.D occupied (the green strip), at which point the height of the parent element is DIV.D open. Then we change, now put Div. The three child elements of a div.b,div. C,div. D are all floating, on top of the above based on the Div. D plus a left float:

  {    float: left ;  }

Effect:

At this point Div. The three child elements of a are completely out of the flow of the document, as I said earlier, not being Div. A contains the. Div at the same time. The height of a can not be open, only the size of the border exists (if you do not add a border, you div.) A can't see, it's like disappearing from the world, to illustrate the problem I have added a border.

Now know that the source of the problem, it is now possible to take a solution to this root cause, the direct point is to clear the float (some places also known as off-float), for how to clear the float, there are many beginner friends still do not understand, then today I list a few common ways to clear the float:

First, Clear:both clear floating

Clear clear float is mostly borrowed from the clear property to clear the float, which is a relatively stale method of clearing floating. Using Clear:both to clear the float, we need to add an extra element, such as a div and BR tag, and define their style as "Clear:both", which is typically used in the following structure:

  <Divclass= "demo A" > <div class=< Span class= "value" > "demob demofloat" >float left</div> <div class= "Democ Demofloat ">float right</div> <div class= "Demod demofloat" >not float</div> <div class=  "clear" ></div> </DIV>             

and apply the styles on the div.clear:

  {    clear:both;  Height:line-height:font-size:}     

This turns the float off to the parent element Div. A will not be able to open its own height because its child elements are floating, as shown in

Second, the use of overflow

Using the overflow method to clear the float is relatively straightforward, just add the following attribute to the floating element:

  {    overflow: auto;    Zoom:1;}    

Use the overflow property to clear the float there is a point to note that the overflow property has three property values: Hidden,auto,visible. We can use Hiddent and auto values to clear the float, but remember not to use the visible value, if the use of this value will not be able to achieve clear floating effect, the other two values can be, its area is said to be a SEO friendly, another hidden SEO is not too friendly, The other difference I can not say, nor waste time. Let's take a look at the effect of overflow to clear the float:

For overflow Property Chu floats We can also apply this:

   . A {      auto;  /* Other browsers recognize   */} * HTML except IE6 and the following versions are not recognized   . A {/      * ie5-6 */   }  

Iii. Methods of Clearfix

This method of clearing floating is now a clear float on the Internet, he is using: after and: Before to insert two elements inside the element, from the face to clear the effect of floating. The implementation principle is similar to the Clear:both method, except that: clear inserts a div.clear tag in HTML, and Clearfix uses its pseudo-class clear:fix to add a div.clear-like effect inside the element. Here's a look at how it's used:

HTML Code:

 <div class=  "demo A Clearfix" > <div  Class= "demob demofloat" >float left</div> <div class= "Democ Demofloat" > float Right</div> <div class= "Demod demofloat" >not float</ div> </DIV>        

Use Clearfx to clear the main grasp of the float, you need to include a floating element in the parent element called Clearfix class name, such as our example, we need in the div. A to add a Clearfix class name. And then add a style to the clearfix.

  . clearfix: Before,. clearfix: After{content:  " ."; display: block; height: 0; visibility: hidden;  .clearfix:after { clear: Both;} .clearfix {zoom:  1;} /* IE < 8 */             

Effect:

In fact, only using clearfix:after can achieve the effect of clear floating, but only when using Clearfix:after in cross-browser compatibility problem There will be a vertical margin overlay bug, specifically caused by this reason, you can browse Thierry Koblentz wrote " Everything Know about clearfix are wrong you can also view this demo if you are interested in this issue. So in order to let the browser compatible with this clearfix of the clear floating, on the original base of the Clearfix:before, so that solves the cross-browser compatibility problem, I am here just a brief introduction, if you are more interested in this clearfix, You can disassemble him locally and strengthen your deep understanding of him.

Clear floating Nicolas for Clearfix describes a simpler way to clear floats in the Better float containment in IE using CSS expressions:

   . clearfix:before, .clearfix:after { span class= "rule" >content:display:table;  .clearfix:after { clear:both; overflow:hidden;  .clearfix { Zoom:1; /* IE < 8 */           

This method uses the same as the previous clearfix, the difference is just the Clearfix:before and clearf:after in the CSS is easier to write, the principle is the same. I've tested it. You can clear the float in all browsers. You can try it without imitation. You can watch this demo.

So the method of clearing floating basically all, finally I summed up my personal view, for reference only in so many ways to clear floating, did not leave the most primitive Clear:both method, especially clearfix:after clear floating, is completely clear: Both, the difference is that you don't need to add a tag to the HTML, but simply add a Clearfix class name to the parent element that has the floating element, so it's easy to solve the problem of clearing the float. But under the ie6-7, we just trigger the element of the sub-haslayout to clear the float, common is zoom:1. (You can click here for more details about Haslayout.)

css--how to clear floating