Introduction to CSS floating and positioning definitions and usage

First, floating

1. Floating elements

1. For floating elements, there are a few things to remember:
First, the floating element is removed from the normal flow of the document in some way, but he still affects the layout;
2. In the unique way of CSS, floating elements are almost "set in a faction", but they still affect the rest of the document;
3. When an element floats, the other elements "surround" the element. Margins around floating elements are not merged.
4. No float: Float:none is used to prevent elements from floating.

2. Floating detailed Insider

Before we learn more about floating content, we first need to know what the inclusion block is.
The inclusion block of a floating element is its closest block-level ancestor element.
CSS provides a series of rules to control the placement of floating elements:

• The left (or right) outer boundary of a floating element cannot exceed the left (or right) inner boundary of its containing block;

• The left (or right) outer boundary of a floating element must be the right (or left) outer boundary of the left-floating (or right-floating) element before it appears in the source document, unless the top of the floating element appears below the bottom of the floating element.

• The right outer boundary of the left floating element does not have to the right of the floating element on its right to the right of the outer boundary.

• The top of a floating element cannot be higher than the inner top of its parent element;

• The top of a floating element cannot be higher than the top of all previously floating elements or block-level elements.

• If another element appears before a floating element in the source document, the top of the floating element cannot be higher than the top of any row box that contains the generated box for that element

• Left (or right) floating element has another floating element on the left (right), the former right outer boundary cannot be on the right (left) edge of its containing block (left)

• Floating elements must be placed as high as possible

• The left floating element must be left in as far as possible, and the right floating element must be as far away as possible.

3. Practical behavior

First, let's look at what happens when a floating element is taller than its parent element.
css2.1 clarifies one aspect of the behavior of floating elements: floating elements extend, thus containing all of their descendants floating elements. so, by placing the parent element as a floating element, you can include the floating element within its parent element.

4. Negative margin

A negative margin can cause a floating element to move outside its parent element. By setting a negative margin, the element may look wider than its parent element, and the floating element may exceed its parent element.
It seems that this rule seems to contradict the previous one (the floating element is placed outside of its parent element);
But a closer look at the rules of the previous section reveals that this is technically permissible, and that the outer boundary of a floating element must be within the parent element, but because the margin is negative, the content of the floating element is placed as if it were covered by its outer boundary.

5. Floating elements, content, and overlap

Another interesting question is what happens if a floating element overlaps with the content in the normal flow?
css2.1 Specifies the following rules:

• When the inline box overlaps a floating element, its border, background, and content are displayed on top of the floating element.

• When a block box overlaps a floating element, its border and background are displayed below the floating element, and the content is displayed above the floating element.

6. Clear

Sometimes, we may not always want content to flow through floating elements, and in some cases we may want to deliberately avoid this behavior. For example:
To ensure that all H3 elements are not placed on the right side of the left floating element, you can set h3{clear:left;}. This can be understood as "ensuring that there is no floating image on the left side of a H3";

Second, positioning

1. Basic Concepts

With positioning, you can define exactly where the element box should appear relative to its normal position, or where the browser window itself is set relative to the parent element and another element.

2. Type of positioning

• static (initial value):
  The element box is generated normally, and block-level elements produce a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element.

• Relative
  The element box offsets a distance. The element still retains its pre-positioned shape, and the space he originally occupied remains.

• Absolute
  The element box is completely removed from the document flow and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element had not existed. The element is positioned to generate a block-level box, regardless of what type of box was originally generated in the normal flow.

• Fixed
  The element box behaves like the position is set to absolute, but its containing block is the window itself.

3. Include Block

For floating elements, the containing block is defined as the nearest block-level ancestor element.
For positioning, the situation is more complex:
-the "root element" of the containing block (also known as the initial containing block) is established by the user agent, in HTML, the root element is the HTML element, but some browsers use body as the root element.
-For a non-root element, if its position value is relative or static, the containing block is the process of the content boundary of the nearest block-level box, table cell, or inline block ancestor box.
-For a non-root element, if its position value is absolute, the containing block is set to the nearest position value is not a static ancestor element.

4. Offset properties

We have described above three positioning mechanisms using four properties to describe the offset of each edge of the anchor element relative to its containing block. We make these four attributes an offset property, which is an important part of completing the positioning.
-For top and bottom, relative to the height of the containing block
-For right and left, relative to the width of the containing block
These properties describe the offset from the nearest edge of the containing block, so it is named offset.

5. Width and height

Set width and height

If you want to specify a specific width for the anchor element, you obviously want to use the Width property, similar to using height, or you can declare a specific height for the anchor element.

Limit width and height

You can use Min-width and min-height to define a minimum size for the content area of an element.
Similarly, you can use attributes Max-width and max-height to constrain the dimensions of an element.

6. Content overflow and clipping

Overflow

Suppose that for some reason an element is fixed to a particular size, but the content does not fit in the element, then the overflow attribute can be used to control the situation;
-Visible:
The default value, which indicates that the contents of the element can also be seen outside the element box. Generally, this causes the content to go beyond its own element box, but does not change the shape of the box.
-Hidden:
The content of the element is clipped at the boundary of the element box, and no scrolling interface is provided to allow the user to access the content beyond the clipping area;
-Scroll:
The content of the element is clipped at the bounds of the element box, but provides a scrolling mechanism for the user to use.

7. Content Tailoring

If the content of an absolutely positioned element overflows its content box, and overflow is set to require that the content be cropped, the shape of the clipping area can be changed by using the properties clip.
Clip:rect (Top,right,bottom,left);

8. Element visibility

In addition to clipping and overflow, you can control the visibility of the entire element.
Visibility
-Visible.
-Hidden not visible.
-Collapse
-Inherit
visibility:collapse when used in a TABLE element, this value can delete one row or column, but it does not affect the layout of the table. The space occupied by rows or columns is left for other content to use. If this value is used on other elements, it is rendered as "hidden".
Visibility:hidden When an element is in an "invisible" state by setting visibility, the element still affects the layout of the document as if it were visible. In other words, the element is still there, but you can't see it. This is different from Display:none, which is not only invisible. It is also removed from the document, so there is no effect on the document layout.

9. Absolute positioning

Contains blocks and absolutely positioned elements

When an element is absolutely positioned, it is completely removed from the document stream. The block is then positioned relative to its inclusion. This means that an absolutely positioned element may overwrite other elements, or be overwritten by other elements.
The containing block of an absolutely positioned element is an ancestor element of the most recent position value that is not static, and the author typically chooses an element as the containing block of an absolutely positioned element, designates its position as relative, and has no offset.

Automatic Edge Offset

The approximate meaning of the term static position of an element is the original position of the element in the normal flow. To be more precise, the "top" static position is the distance from the upper boundary of the containing block to the upper margin boundary of the imaginary box.

10. Placement and size of non-replacement elements

Generally, the size and position of an element depends on its containing block. The values of each property also have some impact, but the main thing is that it contains blocks.

11. Placement and size of replacement elements

The positioning rules for non-replacement and replacement elements are very different. This is because the replacement element has an intrinsic height and width, so its size does not change.
When determining the position and size of the replacement element, the behavior involved is most easily described by the following rules:
-If width is set to auto,width the actual usage value is determined by the intrinsic width of the element content.
-In a left-to-right language, replace auto with a static position if it has the value auto. from right to left;
-If left or right is still auto, replace the auto value of Margin-left or margin-right with 0;
-If both Margin-left and margin-right are also defined as auto, they are set to an equal value, which centers the element in its containing block;
-After this, if only one auto value is left, modify it to equal the remainder of the equation.

12. Placement on z-axis

Control via attribute Z-index

13. Fixed positioning

Fixed positioning is similar to absolute positioning, except that the containing block of a fixed element is a window. When fixed, the element is completely removed from the document flow and does not have a position relative to any part of the document.

14. Relative positioning

The simplest way to understand the positioning mechanism is relative positioning. When this mechanism is taken, the anchor element is moved by using the Offset property.