CSS (floating)

Floating

1, what positioning

The location where the element should appear

Divided into the following categories:

Normal flow positioning (document flow positioning)

Floating positioning

Relative positioning

Absolute positioning

Fixed positioning

2. General Flow Positioning

How the page is positioned by default

Block-level elements: display from top to bottom

Inline elements: Display from left to right

3. Floating positioning

1. What is floating positioning

element is detached from the default document stream and does not occupy space on the page

Floating positioned elements are placed on the left or right side of the containing box

Floating elements remain within the containing box

Floating elements stop floating when they touch other floating elements

2, floating positioning solutions to solve the problem

Implement special positioning methods such as allowing multiple block-level elements to be displayed within the same line

3. Properties

Float

Value:

Left: Floating

Right: Floating

None: No float

The effect of clearing the float:

Property:

Clear:left,right,both;

4. Once the element floats, it will become a block-level element.

, the effect of floating elements on the parent layer elements

Impact: If a floating element is contained within an element, the height of the element may become 0.

Reason: Floating elements are out of the document flow, in theory, not in the parent container

Solution:

1. Display the height of the parent level element

2, through the Overflow:hidden to prop up the height of the parent element

1. Display mode

1, block-level elements

<div></div> HN P

Become a row-level element: Display:inline-block

Features: Single row

2. inline element/Inline element

span, B, I, u, S, a

Become a block-level element: Display:block

Summarize:

1. If a DIV element A is floating, if the previous element of element A is also floating,

Then the a element follows the previous element (if the two elements are not placed on one line, the a element is squeezed to the next line);

If the previous element of the A element is an element in the standard flow,

The relative vertical position of a does not change, meaning that the top of a is always aligned with the bottom of the previous element.

2. Clear float can be understood as breaking the horizontal arrangement.

3. For CSS Clear floating (clear), this rule can only affect the use of the cleared element itself, and cannot affect other elements.

Targeting method related properties

Position

Value:

1, Static: default, statically positioning

2, relative: relative positioning

3, Absolute: absolute positioning

4, fixed: stationary positioning

2. Properties related to positioning position

Top

Bottom

Left

Right

The value in pixels

3. Stacking order

Z-index:value;

A larger value is closer to the user

4. Static

The default positioning method in the page, that is, document flow positioning

5. Relative positioning

A way to achieve positioning relative to where the current element itself appears

Implementation method:

position:relative;

Position movement via top bottom left right

Use occasions:

1, will be the location of the subtle adjustment

2, with the absolute positioning use

6. Absolute positioning

Features: Out of document Flow, does not occupy page space

Anchor position: ancestor element relative to nearest "positioned"

If the ancestor element is not positioned, its position is relative to the original containing block (body)

<nav>

<div>

<p>

<span></span>

</p>

</div>

</nav>

Positioned: Non-static, refers to relative, absolute, fixed

Implementation method:

Position:absolute

Top,bottom,left,right: The position offset, which is offset from the nearest positioned ancestor element.

Use occasions:

1. Location of pop-up menu

All pop-up menus are absolutely positioned

7. Fixed positioning

Pin an element to a position on the page without changing it with the scroll bar scrolling

Grammar:

position:fixed;

Top, left, right, bottom

Common ways 1. Set the parent element to Position:relative

2. Set child elements to Position:absolute

3. Set the displacement of child elements relative to the parent element

such as top:20px; left:30px;

CSS (floating)