CSS Float float

Core: The floating element moves away from the document stream and shifts left/right until it touches the parent element or another floating element.

Float:left floating to the left

Right floats

None (Default)

Inherit inheriting parent elements

Float effect

Original

Change Picture ..... Because I suddenly found a problem, with this picture bad explanation ...

Original

Code

#container {width:1000px; Background-color: #48D1CC; Margin:0Auto;        padding:40px;            }. box1{width:250px;            height:200px;            margin:20px 20px; Background-Color:greenyellow;            }. box2{width:400px;            height:300px;            margin:20px 20px; Background-Color:yellow;            }. box3{width:500px;            height:400px;            margin:20px 20px; Background-Color:lightblue; } span{Font-size:25px; }        <div id="Container"> <divclass="Box1"><span>1111111111</span></div> <divclass="Box2"><span>222222222222</span></div> <divclass="Box3"><span>33333333333333</span></div> </div>

Then let Div1 right move, effect as

When Div float is set to right, DIV1 is detached from the standard document flow, and Div2 and Div3 are re-formed into the new document flow, and div1 floats until it touches the parent element.

When setting div2 float to right, div2 to the last side of the second row, which is why, why not in the first row? This is because the first row is block, occupies a single row, and is still in the standard flow, so the Div2 method occupies its position

When Div2 float for left, the effect is as follows, Div2 floating to div3 up, there is a problem here, Div3 span is squeezed to the bottom, this is why, because when using float out of the document flow, the other boxes will ignore this element, but the other boxes in the The text will still make a position for this element, wrapping around it. For elements that use absolute positioning to detach from the document flow, the text in other boxes and other boxes ignores it.

Here is a question, why div2 in the div2 below, should not be in the same line?

When float is set to left, because Div 1 2 3 is out of standard flow, it causes the parent element to collapse highly

Clear float with clear

Because of the uncertainty caused by the float ..... Often causes the layout of the disorder, clear the float is very necessary

The clear property does not allow floating elements to be cleared to the left or right side of the floating element, and the underlying principle is to add enough clear space to the top or bottom of the element being cleared floating.

For example, just above the diagram, I want to clear the parent element floating, as long as

1 <DivID= "Container">2     <Divclass= "Box1"><span>1111111111</span></Div>3     <Divclass= "Box2"><span>222222222222</span></Div>4     <Divclass= "Box3"><span>33333333333333</span></Div>5     <Divstyle= "Clear:both"></Div>6 </Div>

And that's what's going on up there.

Note that you do not add a float to a floating element, even if the element clears the float, but it is still out of the standard document flow, so the parent element is still collapsed.

Now we generally clear floating method is to use the Clearfix class, compatibility is better

Clearfix Solution for all browsers

Reference Zoom Support IE6/IE7

Join: Before solve the problem of margin folding in modern browsers

1  . clearfix:before,.clearfix:after{  2     display:table; 3      content: ""; 4 }  5  . clearfix:after{  6     clear:both; 7 }  8  . clearfix{  9     *zoom:1; Ten  }

Use Overflow:hidden; clear float

There is also a BFC clear floating

Use Overflow:hidden;

1 #container {2      width:1320px; 3       background-color:      #48D1CC; 4       margin:0 Auto; 5       padding:40px; 6       Overflow:hidden; 7 }

CSS Float float