Float layout

1. The concept:

Floating elements take elements out of the standard flow (as well as absolutely positioned elements) for flexible layout purposes

Value: float: none(default)/left/ right

2. Rules for floating

  1. Out of standard flow

  2. Move to the left or right until its boundary is adjacent to the boundary of the containing block (usually a parent element) or other floating element.

    Note the cascading relationship between the floating element and the positioning element: the positioning element is layered on top of the floating element

  3. Floating elements cannot be stacked with inline content, which will be pushed out by floating elements

    For example: inline elements, inline-block elements, block level elements text content

  4. When an inline element, an inline-block element, floats, the top of the element is aligned with the top of the row (no higher than the height of the current row, no upward float)

  5. Floating elements cannot be layered on top of each other. If one element floats and another element is already in that position, the element that floats after it will cling to the element that floated before it (float left, float right, float right). If there is not enough space left to display the floating element horizontally, the floating element will be moved down until there is enough space to display the floating element

  6. The floating element cannot exceed the top of the containing block, nor the top of all previous floating elements.

3. Floating application scenarios

  1. Resolve gaps between inline level elements, inline-block elements (floating elements are next to another floating element)

  2. Layout, for page layout

4 Clearing floats

Purpose: To make the height of the floating child element count when calculating the total height of the parent element.

5. Margin’s negative value

Note: if margin-top is negative, it will not increase the height, only increase the displacement. If margin-bottom is negative, it will not increase the displacement, and will reduce its height for CSS to read

Margin-left and margin-right both increase the width when width is auto

Applies to the negative margin property on static elements (non-float elements) (when width is fixed) :

When margin-top/margin-left of a static element is given a negative value, the element moves in the specified direction

margin-left/margin-top: -10px; The element will be shifted 10px to the left/up

But when margin-right/margin-bottom is negative, the element does not move to the right/ down, but instead drags in subsequent elements, overwriting the element. (If there are no subsequent elements, nothing seems to have changed)

If width is auto, setting negative margin-left/right will drag the element in the corresponding direction and increase the width

Possible reasons: margin-left and margin-top are relative to the upper left corner of the parent element, while margin-right and margin-bottom are relative to the element itself, affecting the position of the following element, which can be seen when there is a element behind it

/* Set margin-right negative */ when there are no subsequent elements
<style>
    .container{
      width: 1000px;
      background-color: #f00;
      margin: 20px auto;
      height: 380px;
      overflow: hidden;
    }
    .wrap{
      float: left;
      height: 300px;
      width: 1000px;
      background-color: #ff0;
      margin-right: -100px;
    }
  </style>
<div class="container">
      <div class="wrap">
      </div>
    </div>
    
Copy the code

rendering

/* Set margin-right negative */ for subsequent elements  margin-bottomSimilar to the < style >.container{
      width: 1000px;
      background-color: #f00;
      margin: 20px auto;
      height: 380px;
      overflow: hidden;
    }
    .wrap{
      float: left;
      height: 300px;
      width: 1000px;
      background-color: #ff0;
      margin-right: -100px;
    }
    .box1{
      width: 300px;
      height: 300px;
      float: left;
      background-color: #0ff;
    }
  </style>
<div class="container">
      <div class="wrap">
      </div>
      <div class="box1"></div>
    </div>
Copy the code

Effect:

Margin-right :-100px; margin-right:-100px; The wrap element is indented 100px and the margin value does not leave the flow, so the subsequent box element overwrites the wrap element 100px because it thinks it is 100px empty

5.1 for float layouts, when the last element does not require a margin, the inclusion block of the element is set to a margin negative

  1. Contains the formula for calculating the width of the contained block when width is auto

width of container block = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

(Border and padding are 0 when the width of the contained block is auto)

Width =margin-left + width + margin-right

Margi-left = margi-left + auto + margin-right So when margi-left or margin-right is negative, the width of the included block will increase

Margin-left or margin-right, which remove the last element when applied to float layouts, confuses layout elements

Wrap (width auto)+ negative margin> The element that needs to float the layout (set negative margin in.wrap)

  1. Width of container block < margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

5.2 Used to merge borders between elements

When each item has a border, the width of the middle border will overlap. You can set margin negative values so that they do not overlap