CSS Learning (2)-floating

CSS Learning (2)-floating

I. Definition

A floating box can be moved to the left or right until its outer edge hits the border of the contained box or another floating box.

Solution: "How to display multiple div elements in one row"

Ii. Differences between floating and non-floating

Figure 1

Figure 2

Differences

A non-floating box excludes a row from top to bottom, while a floating box is arranged closely. In Figure 2, d1, d2, and d3 all move to the left. Therefore, place d1 in the parent box, d2 In the d1 box, and d3 in the d2 box. Float to the right is similar.

Syntax:

Float: none | left | right

Parameters:

None: the object is not floating.

Left: the object is floating on the left.

Right: The object is floating on the right.

3. Floating instance

Div is a block-level element that exclusively occupies a row on the page and is arranged from top to bottom, that is, the legendary standard stream. For example:

It can be seen that even if the div1 width is small, a line on the page can hold div1 and div2, and div2 will not be placed behind div1, because the div element occupies an exclusive line.

Float can be understood to make a div element break away from the standard stream and float above the standard stream. It is not a level with the standard stream.

Situation1:Div2Float left

If div2 is floating, it will be out of the standard stream, but div1, div3, and div4 are still in the standard stream, so div3 will automatically move up to occupy the div2 position, form a new stream.

Div1, div3, and div4 are arranged in sequence to form a new stream. Div2 blocks part of div3 because the float is floating on the standard stream, and div3 looks "short.

It is the result of d1, d2, d3 left shift.

Figure 1:

Figure 2:

As shown in figure 1, three floating elements cannot be horizontally arranged, other floating blocks move down until there is enough space.

In Figure 2, if floating elements have different heights, they may be "stuck" by other floating elements as they move down ".

Case 2: Right floating of div2

Float right (float: right;) is of course arranged by right. If we change div2 to the right floating mode, the following results will be displayed:

In this case, div2 is arranged on the right edge of the page and no longer blocks div3. You can clearly see the streams composed of div1, div3, and div4.

So far, we have only moved one div element.

Case 3: left floating of div2 and div3

Because div2 and div3 are floating, they no longer belong to the standard stream, so div4 will automatically move up and form a "new" Standard stream with div1, while the floating is floating above the standard stream, therefore, div2 blocks div4.

Div2 is floating in every example, but it does not follow div1. Conclusion:

Assume that A div element A is floating. If an element on Element A is floating, element A follows the back of the previous element (if A row does not fit the two elements, element A will be squeezed to the next line). If an element on Element A is an element in the standard stream, the relative vertical position of element A will not change, that is to say, the top of A is always aligned with the bottom of the previous element.

Summary:

The sequence of divs is determined by the sequence of divs in HTML code.

The front end is near the edge of the page, and the back end is far away from the edge of the page.

Scenario 4: div2, div3, and div4 are all setLeftFloating

Div2 found that the above element div1 is an element in the standard stream, so the relative vertical position of div2 remains unchanged, and the top is still aligned with the bottom of the div1 element. Because it is left floating, the left side is near the edge of the page, so the left side is the front, so div2 is on the far left.

Case 5: div2, div3, and div4 are all setRightFloating

Because it is right floating, so the right side is near the edge of the page, so the right side is the front, so div2 is on the rightmost side.

Case 6: left floating of div2 and div4

Div2 and div4 are floating and are out of the standard stream. Therefore, div3 automatically moves up to form a standard stream with div1. Div2 finds that the previous element div1 is an element in the standard stream, so the vertical position of div2 remains unchanged and is aligned with the bottom of div1. Div4 finds that the last element div3 is an element in the standard stream. Therefore, the top of div4 is aligned with the bottom of div3 and is always true, because it can be seen that after div3 is moved up, div4 also follows up,Div4 always ensures that its top is aligned with the bottom of the previous element div3 (elements in the standard stream )..

It can be seen that, before the elements float, that is, in the standard stream, they are arranged vertically, and after the elements are floated, they can be understood as horizontal arrangement.

Iv. Clear floating

Clear floating can be understood as breaking the horizontal arrangement.

The keyword for clearing float is clear. The official definition is as follows:

Syntax:

Clear: none left right both

Valid value:

None: default value. Allow floating objects on both sides

Left: Float objects on the left are not allowed.

Right: Float objects on the right are not allowed.

Both: Float objects are not allowed.

Case 1: div1 and div2 are two rows (two rows)

Expected result: div1 is not floating, while div2 is floating on the left.

When clear is used, we will first write: add clear: right to the CSS style of div1. It is understood that the right side of div1 is not allowed to contain floating elements, because div2 is a floating element, therefore, a row is automatically moved down to meet the rule.

In fact, this kind of understanding is incorrect, and it does not have any effect.

Clear floating rules: only clear elements can be affected, and other elements cannot be affected.

IfDiv1OfClear right,This clearing float is called in div1. It can only affect div1 but not div2. To move div2 down, you must use float in the CSS style of div2. Therefore, as long as clear: left is used in the CSS style of div2 to specify that floating elements are not allowed on the left of div2 elements, div2 is forced to move down a row.

Case 2: Both div1 and div2 are right-floating

What should I do if I want to move div2 down to div1?

If we want to move div2, we must call floating in the CSS style of div2, because floating can only affect the elements that call div2. We can see that there is a floating element div1 on the right side of div2, so we can use clear: right; In the CSS style of div2 to specify that floating elements cannot appear on the right side of div2, in this way, div2 is forced to move down a row to the bottom of div1.

5. Surround and clear

D1 is floating to the left, while d2 and d3 are not floating. As mentioned in the definition at the beginning, the floating box is out of the normal stream, that is, d1 is floating above, and the d2 and d3 below cannot feel the existence of d1. So d2 is at the top of the parent box. In addition, the content in d2 does not cover the content in d1. We can use this to make the effect. For example, one image is placed in d1 and the interpretation of the image in d2. This is quite reasonable.

Instance:

The row box next to the floating box is shortened to leave space for the floating box. The row box is centered around the floating box.

Therefore, creating a floating box allows the text to be centered around the image:

However, if d1 is irrelevant to d2, you want d2 to start another row. You need to use another CSS property clear. The clear attribute is used to set the left-side, right-side, or left-side floating boxes. D1 floats to the left, d2 and d3 do not float, and the clear attribute of d2 is left.

In addition, although the non-floating box does not feel the existence of the floating box, the floating box knows the existence of the non-floating box. For example, d1 is not floating, d2 and d3 are floating to the left, and d2 can start another row without overwriting d1.

Vi. Note

(1) the box in the text is div.

(2) Intra-Row labels, such as span and clear attributes, do not have any effect. The clear attribute only solves the block-level label problem that ignores the position occupied by floating blocks after floating blocks.

(3) using this floating block, you can use div to build a column layout, that is, the multiple div floats mentioned above, and then use the clear: both footer to split the column.

(4) If your page is squashed together after css float, try the clear attribute.