Css position and floating float

In this case, this box is called an unsung block box because it is not associated with a specially defined element.
The text lines of block-level elements are similar. Suppose there is a paragraph that contains three lines of text. Each line of text forms an unknown box. You cannot apply a style directly to an untitled block or line box because there is no place to apply the style (note that the line box and the line box are two concepts ). However, this helps you understand that everything you see on the screen forms a certain frame.

CSS positioning mechanism

CSS has three basic positioning mechanisms: Normal stream, floating, and absolute positioning.
Unless otherwise specified, all frames are located in the normal stream. That is to say, the element position in a normal stream is determined by the element position in X (HTML.
Block-level boxes are arranged one by one from top to the next. The vertical distance between frames is calculated by the vertical margin of the boxes.
Horizontal layout of the lines in the box. You can use the horizontal padding, border, and margin to adjust their spacing. However, the vertical padding, border, and outer margin do not affect the height of the row's inner frame. A horizontal Box formed by a row is called a Line Box. The height of a Line Box is always enough to hold all the lines in it. However, setting the row height can increase the height of the box.
Next, we will explain in detail relative positioning, absolute positioning, and floating.

CSS position attribute

By using the position attribute, we can select different types of positioning in 4, which affects the way element boxes are generated.
Meaning of the position property value:
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
The element box offsets a certain distance. The element remains in the shape before its position, and its original space remains.
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. The space occupied by the element in the normal document stream will be closed, as if the element did not exist. After the element is located, a block-level box is generated, regardless of the type of box it generated in the normal stream.
Fixed
The element box is similar to setting position to absolute, but its contained block is the window itself.
Tip: relative positioning is actually considered part of the normal stream positioning model, because the element position is relative to its position in the normal stream.

CSS positioning attributes

The CSS positioning attribute allows you to locate elements.
Attribute description
Position places elements in a static, relative, absolute, or fixed position.
Top defines the offset between the top margin and the top boundary of a positioning element.
Right defines the offset between the right margin boundary of the positioning element and the right boundary of the contained block.
Bottom defines the offset between the bottom margin boundary of the positioning element and the bottom boundary of the contained block.
Left defines the offset between the left margin boundary of the positioning element and the left boundary of the contained block.
Overflow settings occur when the content of an element overflows its region.
Set the shape of the element in clip. The element is cut into this shape and displayed.
Vertical-align sets the vertical alignment of elements.
Z-index sets the stacking sequence of elements.

CSS provides some attributes for positioning and floating. With these attributes, you can create a columnar layout that overlaps one part of the layout with the other, you can also complete tasks that require multiple tables for years.
The basic idea of positioning is simple. It allows you to define the position of an element box relative to its normal location, or relative to the parent element, another element, or even the browser window itself. Obviously, this feature is very powerful and surprising. It should be noted that the support of user agents for positioning in CSS2 is far better than that for other aspects.
On the other hand, CSS1 proposed float for the first time, which is based on a feature added by Netscape in the early stages of Web development. Float is not completely positioning, but it is certainly not a normal stream layout. We will clarify the floating meaning in the subsequent chapters.

Everything is framed

Div, h1, or p elements are often called block-level elements. This means that these elements are displayed as a block box ". In contrast, elements such as span and strong are called "in-row elements" because their content is displayed in the row, that is, "in-row boxes ".
You can use the display attribute to change the type of the generated box. This means that by setting the display attribute to block, the elements in the row (such as <a> elements) can behave like block-level elements. You can also set display to none to make the generated elements have no boxes at all. In this way, the box and all its content are no longer displayed and do not occupy space in the document.
However, in one case, block-level elements are created even if no explicit definition is made. This occurs when some text is added to the beginning of a block-level element (such as a div. Even if these texts are not defined as paragraphs, they are treated as paragraphs:

<Div>
Some text
<P> Some more text. </p>
</Div>