CSS Clear Float

all along, I prefer to use float to solve some element alignment, positioning and so on. and has always felt good about it, and thought it had no adverse effect.

recently, due to the company's offshore rate requirements, I was fortunate to HW base D Zone, back to the company, the sky high Emperor far, natural things a lot less, nothing is like to stroll blog. as a matter of fact, I found the "CSS clear Floating" this thing, read a few related blog; today, nothing to summarize.

Let me give you an example.

The following HTML code:

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

Add some styling to them:

. 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 are floating, while DIV.D does not float:

. demob {float:left;}. Democ {float:right;}

Effect: 650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/6E/6F/wKioL1V87kjjr2WTAAA4aRznVRU410.jpg "title=" image 1.jpg "alt=" Wkiol1v87kjjr2wtaaa4arznvru410.jpg "/>

Obviously, you'll find that there's only one last The DIV is struggling to support the outer Div, which means that theother two div has been freed from the outer Div, and the outer Div is not the height of float alone. This DIV is open ;

and then we'll change: Let the last one The DIV also adds a floating effect:

. demod {float:left; }

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/6E/73/wKiom1V87OSiYprEAAA3vjWWdx0582.jpg "title=" Image 2. JPG "alt=" wkiom1v87osiypreaaa3vjwwdx0582.jpg "/>

something more magical happened, three of The Div is separated from the outer Div, which is , in fact, out of the flow of the document.

How to solve this problem, here are a few common ways to solve floating problems.

UseClear:bothClear Floating

Clear clears the float, mainly by borrowing 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", It is typically used in the following structured manner:

<div class= "Demo A" > <div class= "demob demofloat" >float left</div> <div class= "DemoC demoFloat" >float right</div> <div class= "Demod demofloat" >not float</div> <div class= "Clear" ></d Iv> </div>

and Apply the styles on the div.clear:

The. Clear {clear:both;/* mainly uses this property to clear the float */* In order not to allow IE to have a certain space, personal suggestions plus the following three attributes */height:0;    line-height:0;  font-size:0; }

This turns the float off to the parent element Div. A is also not able to open itself up to its own height because its child elements are floating, as shown in:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/6E/6F/wKioL1V87xiyb9V8AAA1FYUVqU8034.jpg "title=" Image 3. JPG "alt=" wkiol1v87xiyb9v8aaa1fyuvqu8034.jpg "/>

By the way on the W3 to check the clear information: give you a picture:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/6E/73/wKiom1V87ffAhOPNAAJrrftts0U928.jpg "title=" Image 4. JPG "alt=" wkiom1v87ffahopnaajrrftts0u928.jpg "/>

UseOverflow

. A {overflow:auto;//can also use hidden zoom:1;/* to trigger its layout under IE, and also to use _height:1% instead of zoom*/}

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/6E/6F/wKioL1V871fwXSueAAA0S8_17r4596.jpg "title=" image 5. JPG "alt=" wkiol1v871fwxsueaaa0s8_17r4596.jpg "/>

ClearfixMethod

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 the HTML , and Clearfix uses its pseudo-class Clear:fix to add a div.clear-like effect inside an element . Here's a look at how it's used:

<div class= "demo A clearfix" > <div class= "demob demofloat" >floatleft</div> <div class= "Democ Demofloat ">floatright</div> <div class=" Demod demofloat ">notfloat</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 to Div. A to Add a clearfix class name. 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 */

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/6E/6F/wKioL1V88BGyr9aWAAA0S8_17r4828.jpg "title=" image 5. JPG "alt=" wkiol1v88bgyr9awaaa0s8_17r4828.jpg "/>

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, so in order to make the browser compatible with the Clearfix of the removal of floating, on the original basis to add Clearfix:before, This solves the cross-browser compatibility problem, I am here simply introduced a bit, If you are more interested in this clearfix, you can disassemble him locally and strengthen your deep understanding of him.

Here's a more simple way to clear the float:

. Clearfix:before,. Clearfix:after {content: "";   display:table;     }. clearfix:after {clear:both;   Overflow:hidden; }. clearfix {zoom:1;/* IE < 8 */}

This method uses the same clearfix as the previous one , except that the CSS in clearfix:before and Clearf:after is easier to write. The principle is still the same. I've tested it. You can clear the float in all browsers.

display:tableMethod

will be Div property becomes a table , the outer DIV plus display:table; this way, although it may achieve the effect of clear floating, but actually destroy the structure, not recommended.

Summarize

Of course, there are some other programs on the Internet, here do not explain, interested can look at the following several blog.

Http://www.divcss5.com/jiqiao/j406.shtml

Http://www.jb51.net/css/173023.html

http://segmentfault.com/a/1190000000699675

This article is from the "Shuizhongyue" blog, make sure to keep this source http://shuizhongyue.blog.51cto.com/7439523/1661734

CSS Clear Float