CSS Edit element floating

1. Element float:

1) Use Float:left; Such formatting elements are floating in a way that the property value can be left,right;

2) When the element is set to left float, the element will float from the original area to the left side of the browser, and the right side will be appended to the right, and the element is arranged on the left by the first element on the right;

3) After setting the float, the element is equivalent to the original placement layer of the element, floating above the layer, where the element below the element occupies the position of the element.

2. The effect of floating:

1) Child floats cause the height of the parent element to collapse;

Workaround:

1 ul{2/    * Reset Height */3    padding:10px; 4 /     * Trigger bfc*/5    Overflow:hidden; 6 }

2) The float has a package (floating only contains the content area);

1 < P > 2     Display content 3</p>45p{6     background-color:red; 7    float:left;   8 }

After executing the above code, the background color will only be rendered red in place of the "Show content" four characters.

3) If the display property is changed after the floating element is set, the width and height values of the corresponding content can be set;

1 <  href= "#"> click </a>23 a{4   float:left; 5 }

When the above code is executed, you can see the width and height of a at the time of review to set a specific value, no longer auto.

4) Element floats will not pass through the padding area, only in the content area;

1 < Div > 2     < em > content </em>3</div>  45div{6    float:right; 7 }

You can see "content" in a Web page by simply moving to the right from the original left area of the content.

5) Floating causes the flow of the document to be detached, affecting other elements. (Like the top 3rd, you can use two div to verify)

CSS Edit element floating