Those things about the CSS float

I believe many students in learning the float property of CSS, there will be a lot of inexplicable small emotions, I also met some, for a moment mark.

The following sections are categorized as follows:

1:float Property

Properties of the 2:float property

2.1:float Text Wrapping Effect

The 2.2:float of the parent element is highly collapsed.

3: How to clear floating

3.1:html method

3.2:css Pseudo-Elemental method

4:float de-whitespace

5:float element blocky

6:float Fluid Layout

6.1: Single-sided fixation

6.2:dom single-sided fixation with different display positions

6.3:dom one-sided fixation with the same display position

6.4: Smart Layout


1:float Property

float, as the name implies, floats, floats the meaning. But in CSS, it is understood to be floating. A float has four properties, which are

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

The more commonly used two attribute values are left-floating and right-floating. In the next share, we'll just take the left float as an example. Other floating property values are the same as the left float principle.

Properties of the 2:float property

　　2.1:float Text Wrapping Effect

The original purpose of the float is for text wrapping effect.

Look at 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   F Loat:left; 8   width:150px; 9   height:150px;10   background-color:lightpink;11   margin:5px;12}

The content element sets the left float, leaving the DIV element out of the document stream, and the text is broken around it.

The 2.2:float of the parent element is highly collapsed.

Take the div element as an example. The height of the div element is automatically stretched through the content. That is, how much content, how high it is. However, when the inner element sets the float property, the parent element is highly collapsed. The code and examples 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 below, collapse after CSS and demo.

1. Container {2   width:300px;3   border:1px solid black;4}5. Container P {6   Float:left;7}

As you can see, the child element sets the changes that occur before and after the float.

3: How to clear floating

So the question is, if the inner element is to be set to float, how do you avoid the problem of the parent element being highly collapsed?

Some students will certainly want to, directly in the parent element set height is not OK? This is not going to work in practice. Because if the height of the parent element is fixed, then if you want to add content to it later, it is not a problem to modify the CSS code again.
There are two ways to resolve the height collapse of a parent element.
　　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: Parent element sets pseudo-class after.

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 {   content: "";   display:table;12   clear:both;13}

4:float element de-whitespace

What does that mean? In the usual code, in order to conform to the HTML encoding specification, HTML tags will be added indentation, to achieve a beautiful effect. But the indentation will produce a space, that is,  . When the element is left floating, the element itself floats and the remaining space is squeezed to the end, which is the text wrapping effect above. However, it is slightly different to remember that a little,  and a carriage return are knocked down by the space.

5:float element blocky

After you set the float property for an inline element, the display property is changed from inline to block. And you can set the width height for inline elements. Use the Float plus width property to achieve some simple fixed-width layout effects.

6:float Fluid Layout

6.1: One-sided fixed, right-adaptive layout.

1         <div class= "container" >2             <div class= "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. right{15     Background-color : lightyellow;16     margin-left:200px;17     height:300px;18     padding-left:10px;19}

　　6.2:dom single-sided fixation with different display positions

1         <div class= "container" >2             <div class= "right" > floating + Fixed width </div>3 <div class=             " 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:200p X 8   height:200px; 9   background-color:lightpink;10}11. Container. Left {   background-color:lightyellow;   margin-right:200px;14   height:300px;15   padding-left:10px;16}

That is, the HTML element differs from the position of the element displayed on the page.

　6.3:dom one-sided fixation 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" > floating + Fixed width +margin-left negative </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 {   background-color:lightyellow;15   margin-right:200px;16   height:300px;17   TEXT-ALIGN:CENTER;18}

　　6.4: Smart Layout

The so-called smart layout, is the two columns do not need to set the width, width with the content adaptive.

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:3 00px; 8   Background-color:lightpink; 9}10. Container. Right {one   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 {one   display:table-cell;12   *display:inline-block;   height:300px;14   background-color:lightyellow;15}

Summarize the following:

1: When an element sets the float property, the element is blocky.

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

The 3:float element causes the parent element to collapse highly.

The 4:float element removes the spaces that are brought by line breaks.

5: Use float to achieve a two-column adaptive layout.

Well, for the time being, just write it here, tot.

Those things about the CSS float