Css Float and cssfloat

Css Float and cssfloat

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

 

Float: left float to left

Right float to the right

None (default)

Inherit inherits the parent Element

 

Float Effect

Original

 

Changing the image... Because I suddenly found a problem, it is hard to explain it with this picture ........

Source image

Code

        #container{            width: 1000px;            background-color:      #48D1CC;            margin: 0 auto;            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">            <div class="box1"><span>1111111111</span></div>            <div class="box2"><span>222222222222</span></div>            <div class="box3"><span>33333333333333</span></div>        </div>            

 

 

 

 

Then move div1 right. The effect is shown in figure

When div float is set to right, div1 disconnects from the standard Document Stream, div2 and div3 reconstructs a new document stream, and div1 floats to the right until it encounters a parent element.

When div2 float is set to right, the last side of div2 goes to the second row. Why is it not in the first row? This is because the first row is block, occupying a single row and still in the standard stream, so the div2 method occupies its position

When div2 float is left, the effect is as follows: div2 floated to div3. There is a problem here: the span in div3 is squeezed below. Why, because when float is used to exit the Document Stream, other boxes will ignore this element, butTextThis element is still exclusive and surrounded. For elements that use absolute positioning to exit the Document Stream, other boxes and text in other boxes will ignore it.

There is a problem here. Why should div2 be in the same line below div2?

 

When float is set to left, because div 1 2 and 3 are out of the standard stream, the height of the parent element will collapse.

 

Clear floating with clear

Due to the uncertainty brought by floating... it will often lead to layout disorder, it is very necessary to clear floating.

 

The clear attribute does not allow the floating element to be cleared on the left or right side of the floating element. The underlying principle is to add enough space to or from the floating element.

For example, in the figure above, if I want to clear the float for the parent element

1 <div id="container">2     <div class="box1"><span>1111111111</span></div>3     <div class="box2"><span>222222222222</span></div>4     <div class="box3"><span>33333333333333</span></div>5     <div style="clear: both"></div>6 </div>

 

And the above is like this.

Note: Do not add float to the floating element. Even if the floating element is cleared, it is still out of the standard Document Stream, so the parent element is collapsed.

 

Now we generally use the clearfix class to clear the float, and the compatibility is better.

General clearfix solution for all browsers

Reference zoom supports IE6/IE7

Add: before solves the margin folding problem of 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;10  }
　　

 

1 <div id="container" class="clearfix">2     <div class="box1"><span>1111111111</span></div>3     <div class="box2"><span>222222222222</span></div>4     <div class="box3"><span>33333333333333</span></div>5 </div>

 

Use overflow: hidden; To clear floating

Another way is to clear the float of BFC.

Use overflow: hidden;

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