CSS float learning experience for important attributes and CSS float learning experience

CSS float learning experience for important attributes and CSS float learning experience

1 float: none; 2 float: left; 3 float: right; 4 float: inherit;

The two commonly used property values are left-floating and right-floating. In the next share, we will only use the left floating as an example. Other floating property values share the same principle as the left floating value.

2.1: float text surround Effect
The original intention of floating is to wrap the text.

See the following code and demo.

1 <div class="container">2     <div class="content"></div>3     <p>4 Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!5         </p>6     </div>    

 1 .container { 2   width: 300px; 3   height: 300px; 4   border: 1px solid black; 5 } 6 .container .content { 7   float: left; 8   width: 150px; 9   height: 150px;10   background-color: lightpink;11   margin: 5px;12 }

2.2: float parent element height collapsed

1 <div class = "container"> 2 <p> 3 Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! 4 </p> 5 </div>

1. container {2 width: 300px; 3 border: 1px solid black; 4} 5. container p {6 float: left; 7}

 

1 <div class = "container"> 2 <p> 3 Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! 4 </p> 5 <div class = "clearfix"> </div> 6 </div>

 1 .container { 2   width: 300px; 3   border: 1px solid black; 4 } 5 .container p { 6   float: left; 7 } 8 .container .clearfix { 9   overflow: hidden;10   *zoom: 1;11 }

1 <div class = "container"> 2 <p> 3 Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! 4 </p> 5 </div>

 1 .container { 2   width: 300px; 3   border: 1px solid black; 4   *zoom: 1; 5 } 6 .container p { 7   float: left; 8 } 9 .container:after {10   content: "";11   display: table;12   clear: both;13 }

 

Text surround effect.However, remember that & nbsp; is slightly different from the space that you press Enter.

1 <div class = "container"> 2 <div class = "left"> left floating + fixed width </div> 3 <div class = "right"> right adaptive width + margin-left </div> 4 </div>

 1 .container{ 2     max-width:90%; 3     margin:0 auto; 4 } 5  6 .left{ 7     float:left; 8     text-align:center; 9     background-color: lightpink;10     width: 200px;11     height:300px;12 }13 14 .right{15     background-color: lightyellow;16     margin-left:200px;17     height:300px;18     padding-left:10px;19 }

 
1 <div class = "container"> 2 <div class = "right"> right floating + fixed width </div> 3 <div class = "left"> left adaptive width + margin-right </div> 4 </div>

 1 .container { 2   max-width: 90%; 3   margin: 0 auto; 4 } 5 .container .right { 6   float: right; 7   width: 200px; 8   height: 200px; 9   background-color: lightpink;10 }11 .container .left {12   background-color: lightyellow;13   margin-right: 200px;14   height: 300px;15   padding-left: 10px;16 }

 

That is to say, the location of the html element is different from that of the element displayed on the page.

1 <div class = "container"> 2 <div class = "left-content"> 3 <! -- Left floating + width100 % --> 4 <div class = "left"> margin-right </div> 5 </div> 6 <div class = "right"> left floating + fixed width + negative value of margin-left </div> 7 </div>

 1 .container { 2   max-width: 90%; 3   margin: 0 auto; 4 } 5 .container .right { 6   float: left; 7   width: 200px; 8   height: 200px; 9   background-color: lightpink;10   margin-left: -200px;11   height: 300px;12 }13 .container .left {14   background-color: lightyellow;15   margin-right: 200px;16   height: 300px;17   text-align: center;18 }

1 <div class = "container"> 2 <div class = "left"> 3 float + margin-right + adaptive width 4 </div> 5 <div class = "right"> 6 display: table-cell --- IE8 +; 7 display: inline-block --- IE7 +; 8 adaptive width 9 </div> 10 </div>

 1 .container { 2   max-width: 90%; 3   margin: 0 auto; 4 } 5 .container .left { 6   float: left; 7   height: 300px; 8   background-color: lightpink; 9 }10 .container .right {11   display: table-cell;12   *display: inline-block;13   height: 300px;14   background-color: lightyellow;15 }

 1 .container { 2   max-width: 90%; 3   margin: 0 auto; 4 } 5 .container .left { 6   float: left; 7   height: 300px; 8   background-color: lightpink; 9 }10 .container .right {11   display: table-cell;12   *display: inline-block;13   height: 300px;14   background-color: lightyellow;15 }

 

Summary:

1: When a float attribute is set for an element, it will block the element.

2: The float attribute was originally created for the effect of text wrapping.

3: The float element will collapse the height of the parent element.

4: The float element removes spaces from line breaks.

5. Use float to implement adaptive layout of two columns.

For more information about CSS, see zhangxin xuda Niu.