Float of CSS editing elements and float of CSS editing Elements

Float of CSS editing elements and float of CSS editing Elements

1. element floating:

1) use float: left; To set the element floating mode, the attribute value can be left or right;

2) When the element is set to left floating, the element will float from the original area to the Left page of the browser; when the right floating, it will be attached to the right area, in addition, the elements are arranged to the left based on the first position of the first element on the right;

3) after the element is set to float, it is equivalent to directly detaching from the original placement layer of the element and floating on the layer. The elements below the element position will occupy the position of the element.

2. Floating function:

1) Child floating causes the height of the parent element to collapse;

Solution:

1 ul {2/* reset height */3 padding: 10px; 4/* trigger BFC */5 overflow: hidden; 6}

2) floating is package (only content areas are included after floating );

1 <p> 2 show content 3 </p> 4 5 p {6 background-color: red; 7 float: left; 8}

After the above code is executed, the background color is rendered in red only in the area of "show content.

3) when the row element is set to float, the display attribute is changed, and the width and height values of the corresponding content can be set;

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

After the above code is executed, you can see that the width and height of a can be set at the time of review, instead of auto.

4) The element floating will not pass through the padding area, but will only be in the content area;

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

On the webpage, you can see that the "content" is moved from the original left area of the content to the right.

5) floating will lead to the separation of the Document Stream and affect other elements. (For example, the third point at the top can be verified by using two divs)