A detailed explanation of commonly used CSS naming rules

The following small series for everyone to bring a CSS important properties of the float learning experience (share). Small series feel very good, now share to everyone, also for everyone to make a reference. Let's take a look at it with a little knitting.

Let's take a look at CSS important properties--float.

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

Float:none;   Float:left;   Float:rightright;   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.

<p class= "Container" >    <p class= "content" ></p>    <p>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!           </p>    </p>

. container {     width:300px;     height:300px;     border:1px solid black;   }   . Container. Content {     float:left;     width:150px;     height:150px;     Background-color:lightpink;     margin:5px;   }

The content element sets the left float so that the P element is out of the document stream, and the text is displayed in a bad circle around it.

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

Take the P element as an example. The height of the P 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.

<p class= "Container" >    <p>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!       </p></p>

As below, collapse after CSS and demo.

. container {     width:300px;     border:1px solid black;   }   . Container p {     float:left;   }

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 empty p at the bottom of the parent element, and then add the attribute Clear:both.

The code is as follows.

<p class= "Container" >            <p>            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!               </p>            <p class= "Clearfix" ></p>        </p>

. container {     width:300px;     border:1px solid black;   }   . Container p {     float:left;   }   . Container. clearfix {     Overflow:hidden;     *zoom:1;   }

3.2: Parent element sets pseudo-class after.

<p class= "Container" >            <p>            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!               </p>        </p>

. container {     width:300px;     border:1px solid black;     *zoom:1;   }   . Container p {     float:left;   }   . Container:after {     content: "";     display:table;     Clear:both;   }

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.

<p class= "Container" >             <p class= "left" > floating + Fixed width </p>             <p class= "right" > Adaptive width + Margin-left</p>         </p>

. container{       max-width:90%;       margin:0 auto;   }   . left{       Float:left;       Text-align:center;       Background-color:lightpink;       width:200px;       height:300px;   }   . rightright{       Background-color:lightyellow;       margin-left:200px;       height:300px;       padding-left:10px;   }

6.2:dom single-sided fixation with different display positions

<p class= "Container" >             <p class= "right" > floating + Fixed width </p>             <p class= "left" > Adaptive width + Margin-right</p>         </p>

. container {     max-width:90%;     margin:0 auto;   }   . Container. rightright {     float:rightright;     width:200px;     height:200px;     Background-color:lightpink;   }   . Container. Left {     background-color:lightyellow;     margin-right:200px;     height:300px;     padding-left:10px;   }

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

<p class= "Container" >            <p class= "Left-content" >                <!--left floating +width100%---                <p class= "Left" >margin-right</p>            </p>            <p class= "right" > floating + Fixed width +margin-left negative </p>        </p>

. container {     max-width:90%;     margin:0 auto;   }   . Container. rightright {     float:left;     width:200px;     height:200px;     Background-color:lightpink;     Margin-left: -200px;     height:300px;   }   . Container. Left {     background-color:lightyellow;     margin-right:200px;     height:300px;     Text-align:center;   }

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.

<p class= "Container" >            <p class= "left" >                float+margin-right+ Adaptive width               </p>            <p Class= "Right" >                display:table-cell  ---ie8+;                   Display:inline-block   ---ie7+;                   Adaptive width               </p>        </p>

. container {     max-width:90%;     margin:0 auto;   }   . Container. Left {     float:left;     height:300px;     Background-color:lightpink;   }   . Container. rightright {     Display:table-cell;     *display:inline-block;     height:300px;     Background-color:lightyellow;   }

. container {     max-width:90%;     margin:0 auto;   }   . Container. Left {     float:left;     height:300px;     Background-color:lightpink;   }   . Container. rightright {     Display:table-cell;     *display:inline-block;     height:300px;     Background-color:lightyellow;   }

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.

This CSS important property of the float learning experience (sharing) is a small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support topic.alibabacloud.com.

