CSS attributes: float learning experience and CSS float learning experience

CSS attributes: float learning experience and CSS float learning experience

Full text reference: http://www.linzenews.com/program/net/2331.html

Let's take a look at float, an important attribute of CSS.

The following content is divided into the following sections:

1: float attributes

2: float attributes

2.1: float text surround Effect

2.2: float parent element height collapsed

3: How to clear floating

3.1: html Method

3.2: css pseudo-Element Method

4: float de-space

5: float element bulk

6: float Fluid layout

6.1: Unilateral Fixation

6.2: DOM is fixed with one side with different display locations

6.3: the DOM is fixed with a single side with the same display position.

6.4: Smart Layout


1: float attributes

Float, as its name implies, is floating. But in css, It is understood as floating. Float has four attributes:

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: float attributes

　　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 }

The content element is left floating so that the div element is out of the Document Stream and the text is broken and displayed around it.

2.2: float parent element height collapsed

Take the div element as an example. The height of the div element is automatically opened through the content. That is to say, the height of the content is high. However, when the float attribute is set for an internal element, the height of the parent element will collapse. The code and example are as follows.

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>

As shown below: css and demo after collapse.

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

 

It can be seen that the sub-element changes before and after floating.

3: How to clear floating

So the question is, if the internal element needs to be set to float, how can we avoid the parent element height collapse?

Some may think that it is okay to set the height of the parent element directly? This is not feasible in reality. If the height of the parent element is fixed, it is very troublesome if you want to add content to it later, instead of modifying the css code.
There are two ways to solve the parent element height collapse.
　　3.1: add an empty div at the bottom of the parent element, and then add the property clear: both.

The Code is as follows.

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 }

3.2: Set the pseudo-class after for the parent element.

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 }

 

4: float elements de-space

What does that mean? In normal coding, in order to comply with HTML coding specifications, html tags are added with indentation to achieve beautiful results. However, a space is generated during indentation, that is, & nbsp ;. When left floating is set for an element, the element is left floating, and the remaining spaces are squeezed to the end, that isText surround effect.However, remember that & nbsp; is slightly different from the space that you press Enter.

5: float element bulk

After the floating attribute is set for the inline element, the display attribute is changed from inline to block. You can also set the width and height for inline elements. You can use the float and width attributes to implement some simple fixed-width la S.

6: float Fluid layout

 

6.1: one side fixed, right side Adaptive Layout.

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 }

 
　　6.2: DOM is fixed with one side with different display locations

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.

　6.3: the DOM is fixed with a single side with the same display position.

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 }

　　6.4: Smart Layout

The so-called smart layout means that no width needs to be set for both columns, and the width is adaptive with the content.

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.