Frontend - Floating vs Positioning

float vs position

1. float

To change a block-level box into an inline attribute, you need to use display to parse spaces: display: inline-block

The essence of the inline block: it is the inline element

Alignment of inline elements: baseline alignment

xhgf: The line formed by the two feet below x is the baseline

• When there is no content in the box, the bottom is the baseline
• When there is content in the box, the baseline of the bottom line of text in the box shall prevail

This kind of layout is too troublesome. You can set vertical-align: bottom; to align the boxes horizontally, so you don’t need to use display to do horizontal layout.

Choose to use floating to do the effect that was originally used to do graphic wrapping

Floating can make an element out of its original position , out of the original arrangement rules (browser's default ordering rules), and move to the left or right in the content area of ​​the parent element until it touches the border of the content area of ​​the parent element or other floating elements. Mainly used to set the horizontal alignment of block elements.

Attribute: float

value	describe
left	element floats left
right	element floats right

• Elements set to float will be out of flow from the original position and no longer occupy space in the document
• Floating to find floating, the next floating element will float left and right behind the previous floating element, but the two floating boxes are supposed to not overlap or cover each other
• Any label can add floating attributes , the floating label has the characteristics of an inline block , can be displayed in one line, and the width and height can be set. But it is more advanced than inline blocks, and there is no space for label wrapping
• Floating elements will block the position of normal elements and cannot block the display of normal content. The content displayed around the floating element will only cover the background of the box, and the reasonable content and text will float and overflow (the text level is relatively high)

Clear floats:

Clear the effects of floating:

When the height of the parent element is not set, the height will be stretched by the content of the document flow. And when the child element floats, it breaks away from the document flow, so the height of the parent level will not be stretched, and it will be squeezed away by the non-floating elements, causing it to leave the position we want, which will cause our subsequent layout structure. A lot of trouble.

• For elements with fixed content, if the child elements are all floating, you can fix the height of the parent element (eg: navigation bar)
  • in some layouts
• Add an empty block element at the end of the parent element. Set clear:both; clear float
• Set overflow:hidden for the parent element; the solution height is 0

2. Positioning

Positioning and floating are used to adjust the position of elements macroscopically, and margins are used to adjust the relationship between boxes

The position attribute in CSS is used to set the position of the element on the page, and you can place any attribute at any position you think is appropriate. The position attribute corresponds to different positioning methods

One way is to set: but it will make the page more complicated

You can set the positioning first, and then set the specific position of the positioning element through left right top bottom

You can pass in specific values ​​such as left to indicate how many pixels have been moved, or you can pass in a percentage (left: 50% means that the dot on the upper left of the rectangular box has moved to half of the page)

<style>
    .clearfix {
      
      
        clear : both;
    }
</style>

• Relative relative positioning: The relative positioning of the element can be offset by referring to the original position of the element in the document , without breaking away from the document flow

  • After the relative positioning of the element is enabled, there will be no change without setting the offset
  • Relative positioning refers to its own position for positioning
  • It will not break away from the document flow and will not affect the layout of the page after relative movement, but the position of the box on the page has changed
  • It will not affect the nature of changing the element itself, block level or block level, inline or inline
  • Not suitable for large position adjustment, suitable for small range of movement

• Absolute absolute positioning: Absolutely positioned elements are offset with reference to their nearest positioned ancestor elements . If not, offset with reference to the window, using the browser window as the reference.

  • Absolutely positioned elements will be out of flow, do not retain their position, and will cover the text (the level of positioning is higher than that of the text)
  • Does not take up space in the document, you can manually set the width and height
  • This produces the stacking order

  "Father relative to child": Set relative positioning for the parent element, absolute positioning for the child element, refer to the offset of the positioned parent element

• **fixed positioning: **Refer to the window for positioning, and scroll without following the scrolling of the webpage. Out of document flow references are the browser itself, references and navigation bars

The positioned element can use the offset property to adjust the position of the distance reference object

Simply setting the positioning method can't see any effect on our page. If you want to move the element, you need to set four attributes

top   	距参照物的顶部
right	距参照物的右侧
bottom	距参照物的底部
left	距参照物的左侧

stacking order

When elements are stacked, you can use the z-index attribute to adjust the display position of the positioned element . The larger the value, the higher the element :

• Attribute: z-index
• Value: Unitless value, the larger the value, the higher the value
• stack:
  1. The positioned element is stacked with the normal elements in the document, and the positioned element is always on top
  2. The same positioned elements are stacked, according to the writing order of the HTML code, the later come first

Center a box by positioning:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过定位将盒子居中</title>
    <style>
        .box {
      
      
            position: absolute;
            left: 50%;
            top: 50%;
            width: 500px;
            height: 500px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

Specific effect:

no matter how the size of the screen is adjusted, the box is always in the middle position: