CSS learning notes 08 floating, css learning notes 08

CSS learning notes 08 floating, css learning notes 08

From the document on the CSS study note 05 "display attribute", we know that div is a block element and occupies only one row, even if the div width is small, as shown below

Applying the inline attribute of the display attribute allows the div and div to share a row. In addition to this method, there are no other methods to achieve this effect. The answer is yes, that is, the floating feature of CSS to be introduced below. Float literally means float and dynamic. Who float and who is it? Looking down, you will soon know the answer.

Element floating means that the elements with floating attributes are out of the control of the standard document stream and floating on the standard stream. Although elements are not moved from the standard stream, the layout of the standard stream is still affected.

In CSS, float attributes are used to define float.The basic syntax format is as follows: Selector {float: attribute value;}. The default value is none (not floating). In addition, left is used to indicate left floating. It can be understood as the left-side sorting after floating, right indicates the right floating, which is naturally arranged on the right.

Now let's set a float for div2 to see what will happen.

1 <! DOCTYPE html> 2 

At this time, the location of div2 has not changed, while div3 has moved up and shared a line with div2, which is equivalent to div2 not occupying the page space, but affects the text layout in div3. It can also be clearly seen from here that the floating object div2 first floats, and then the subsequent object div3 will move to its original position, which also answers the questions raised at the beginning.
Floating is to cancel the behavior of a block element exclusive to a row. It can be understood from the original document stream mode as it floated, and its original location is empty, the content of the object is separated, so that the object after the object does not exist.
Next, let's set up a float for div3. Is there any unexpected results?

At this time, because div2 and div3 are both set to float, they are all out of the standard stream, so div4 moves up and div1 forms a new standard stream, the floating element is "floating" on the elements of the standard stream, so div4 is blocked by div2 and div3.
From the above phenomenon, we can see that after div3 is set to float, div3 is followed by div2, but div2 is also set to float, but div2 is not followed by div1, here we can draw a conclusion:
The position of floating element A is related to the last element (block level. If the last element is floating, the top of Element A is aligned with the top of the last element (that is, next to the back of the last element). If one row cannot fit, element A is squeezed to the next row. If the last element is A standard stream, the top of Element A is aligned with the bottom of the previous element.
If div4 is set to left floating, the effect is as follows:

Let's take a look at the analysis. First, let's take a look at div4. The last div3 element sets the left floating, so the top of div4 is aligned with the top of div3, And then we look at div3, div2, the last element of div3, is also set to the left floating, so div3 is directed to the top of div2. Now, the last element of div2 is div1, however, div1 does not set the floating attribute and is a standard stream. Therefore, the top of div2 is aligned with the bottom of div1.
Some people may wonder what to do if they want div4 to exclusively occupy a row? This requires the clearance of float by CSS. The keyword for clearing float is clear, which has the following values:

Let's take a look at the phenomenon of left floating in div2 settings.

Div3 occupies the space of the div2 element because div2 is set to the left floating. div3 occupies the space of div2 element because the div3 aspect ratio is large in width and height, so div3 is blocked by div2, we know that the elements in the standard stream are not set with the floating attribute, so we need to clear the impact of div2 floating on div3. Because div2 is left floating, we need to clear the floating on the left for div3.


The phenomenon is the same as that of float. Now div2 and div3 are both set to left float. I think it is easier to know how to let div4 exclusively occupy a row.


Other floating property values can be cleared and tested by analogy. With the above foundation, we can make the following common webpage la S.
1 <! DOCTYPE html> 2