CSS (1) Parse Float Collapse and Clear Float

clear float method

1. Set the CSS height to the parent, and the parent element is stretched and contains child elements.

  <p>固定高度</p>
  <div style="height: 50px;">
    <i>Float Test</i>
    <div style="float: left; background: red; height: 50px;">Float Left</div>
    <i>Float Test</i>
  </div>

2. Parent tag---Additional style attribute 'overflow' attribute value is 'auto' or 'hidden'. to clear the float

  <p>overflow hidden</p>
  <div style="overflow: hidden;">
    <i>Float Test</i>
    <div style="float: left; background: red; height: 50px;">Float Left</div>
    <i>Float Test</i>
  </div>

  <p>overflow auto</p>
  <div style="overflow: auto;">
    <i>Float Test</i>
    <div style="float: left; background: red; height: 50px;">Float Left</div>
    <i>Float Test</i>
  </div>

3. The additional child element style is set to clear:both. to clear the float

  <p>附加元素</p>
  <div>
    <i>Float Test</i>
    <div style="float: left; background: red; height: 50px;">Float Left</div>
    <i>Float Test</i>
    <div style="clear: both;"></div>
  </div>

4. CSS3 pseudo-element, parent tag is attached with class. to clear the float.

   // html
  <div class="clearfix">
    <p>Float Test</p>
    <div style="float: left; background: red; height: 50px;">Float Left</div>
    <p>Float Test</p>
    <p>Float Test</p>
    <div style="float: left; background: red; height: 50px;">Float Left</div>
    <p>Float Testdas</p>
    <p>Float Testsdasdas</p>
    <p>Float Testasdasdasda</p>
  </div>

    // css
    .clear_fix::after {
      content: ".";
      clear: both;
      display: block;
      line-height: 0;
      overflow: hidden;
      font-size: 0;
      height: 0;
    }

    .clear_fix {
      zoom: 1;
    }
}

Clear Float Method Summary

1. Method 1: Fixed height, this method can be used with known height.

1. Method 2: The parent element sets the style attribute overflow, and this method can be used to predict that the width and height of the content are consistent with the parent.

a. hidden If the child's content exceeds the parent's width and height, the excess part of the child's content will be trimmed

b. hidden If the width and height of the child's content exceeds the parent's width and height, the excess part of the child's content will be trimmed

1. Method 3: The child element is cleared and floated. This method is the most flexible, easy to understand, and easy to use, but it will result in redundant code and elements.
2. Method 4: The pseudo element clears the float. It is recommended to use this method
   a. The HTML code of this method is cleaner, there will be no redundant elements in the code, and the element still exists in the document tree.
   b. This method is limited to clearing the float at the end of the box, similar to methods 1 and 2, because pseudo-elements only support the beginning and end of the element's content (::before, ::after)

document tree visual formatting model

The rendering model consists of three

1. Normal flow: consists of block-level boxes and inline-level boxes

2. Float (floats): It will first break away from the normal flow, and then float to the upper left or upper right according to the attribute, to the left or right of the context content (Content) of the nearest block-level box.

   If the float is not cleared, after the float, the remaining context content (float collapse) will be filled by the normal flow elements after the block-level element, that is, the layout is disordered.

3. Absolute positioning: Get out of all constraints, often called out of document flow. When position, the value is 'absolute' or 'fixed' to create a new layer, set the level according to the z-index, and determine the placement position according to the left, right, top, bottom properties.
   https://www.w3.org/TR/CSS21/visuren.html#visual-model-intro

floating collapse

If a child object in a box uses the CSS float property, the box cannot wrap the child object, and float collapse occurs.
Formula: When the height of the parent object (div content) is less than the height of the floating child object (div style="float: left;"), as shown in the figure:

1. Parent object box === display: block === block element

When the parent object does not have a height set, it will be stretched by the block-level or row-level object by default, but will not be stretched by the floating child object.

2. Floating child objects

Float to the parent's context (content), left or right, and the parent's left or right width will decrease. Floating objects exist in the context and are affected by the box properties main, padding, and border (as shown in the green border).

3. Collapse area

After floating, the remaining context content (the yellow area in the figure) will be filled with the normal flow elements after the block-level element. That is, the layout is disordered.

Floating Negative Effects

1. The content of the box (height, border) cannot be stretched, so that the background cannot be displayed normally, and the margin padding setting value cannot be displayed correctly.
2. The layout is messed up and cannot be displayed normally as expected.