Float and location in CSS

• Write Boyuan
• Positioning
  • Fixed fixed
  • Static
  • Relative relative
  • Absolute absolute
• Floating
  • Float left and right
  • Clear floating
• Summary

Reasons for writing this blog

Niu Yun's news publishing system functions have all been implemented, but when I look at the page, it is very bitter. Compared with the original and many web pages, it is really unsightly, such:

I know what you want to say, too. People rely on clothing and beauty, while what does webpage rely on? It depends on CSS. The reason is that it is too easy to understand the float and positioning in CSS, coupled with the absence of art bacteria. The following describes the float and positioning in detail.

Positioning

Positioning refers to determining the display position of an element. positioning has two important factors: one is relative to WHO, and the other is whether or not the original space is available.

Static

The element box is generated normally. Block-level elements generate a rectangular box. As part of the Document Stream, one or more row boxes are created for the element in the row and placed in the parent element.
Relative relative
The element box offsets a certain distance. The element remains in the shape before its position, and its original space remains.
Absolute absolute
The element box is completely deleted from the document stream and located relative to its contained block. The inclusion block may be another element in the document or an initial inclusion block. After the element is located, a block-level box is generated, regardless of the type of box it generated in the normal stream.
Fixed fixed
The element box is similar to setting position to absolute, but its contained block is the window itself.

Floating

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. Because the floating box is not in the normal stream of the document, the block box in the normal stream of the document performs as if the floating box does not exist. For a moment, the box can float to the left and right. Floating is based on the parent element. Since floating is only to determine the direction and no distance is specified, when will it stop moving? When it encounters the frame of the parent element or the border of another floating box during the floating process, it stops because the floating box is out of the standard stream, the arrangement of other elements in the standard stream is irrelevant to the floating.

Floating examples

In order to facilitate the simple demonstration, w3school's online testing tool is used. Three images are used for demonstration. The first image is "apple" and the second image is "cute ", the third part is "background ".

Before operation:

Apple float to the right:

Only Apple floats to the right, but the arrangement of the other two images has not changed. This is "the block boxes in the normal stream of the document are displayed as if the floating box does not exist ".

Apple floats to the right, and cute floats to the left:

After the float is displayed, because their parent-level elements are the same, they are all outer boxes. Apple moves to the right of the interface and cute moves to the left of the interface due to the float to the left. It should be noted that the cute is moved from the bottom position to the top.

Float left:

This is because Apple first floated to the left, occupying the first position. When cute floated to the left relative to the parent element, it should also be Apple's position, however, it is occupied by Apple. When the right border of apple is reached during the cute floating process, the floating is stopped, and the background image is similar.

"Unexpected" floating:

If the contained box is too narrow to accommodate three floating elements in a horizontal arrangement, the other floating blocks move down until there is enough space. If the height of floating elements is different, they may be "stuck" by other floating elements when moving down ".

Clear floating

The clear attribute specifies which side of the element does not allow other floating elements.

Float to the right:

Clear left and right floating:

The reason is that the sides of Apple are not allowed to float, cute can only move down until it is out of the left and right of apple, and the background is the same.

Summary

Float and location can both be regarded as "location", that is, to define the location where the specified element appears according to the display needs. Of course, there are much more CSS content than this, here is a brief introduction to positioning and floating.