1. Floating Introduction

Float definition: Float can be thought of as a div element floating above the standard flow, not on the same level as the standard flow.

2. Floating conclusions

If A div element A is floating, and an element above it is also floating, the element A follows the previous one (if the two elements do not fit in A row, the element A is pushed to the next row). If the element above the 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.

The order of divs is determined by the order of the div in the HTML code. The end near the edge of the page is front, and the end away from the edge of the page is back.

    <style type="text/css">
        .a {
            height: 100px;
            background-color: green;
            width: 100px;

        }

        .b {
            border: solid 2px skyblue;
            height: 100px;
            width: 200px;
            float: left;
        }


        .c {
            height: 200px;
            background-color: red;
            width: 100px;
        }
    </style>


<body>
    <div class="a"></div>
    <div class="b">
    </div>
    <div class="c">
    </div>
</body>
Copy the code

Element A stays put, element B floats, and element C rises to the top of element B. Think about it in the comments

3. Clear floats

3.1 Conclusion of clearing floating

So that’s a good idea

When it comes to CSS clear, it’s important to remember that this rule only affects the element being cleared, not other elements.

Experience with demo:

3.2 There are four ways to clear floating information

  1. Float: Out of document flow

    float: right | left | none;

  2. Remove the floating

    clear: left | right | both

    None: The default, allowing floating objects on both sides

    Left: Floating objects are not allowed on the left

    Right: Floating objects on the right are not allowed

    Both: no floating objects are allowed

  3. Float collapse: when the parent element is not set to height, the children float, and the parent element height is 0, because there are no children to support height (if the parent element height is set manually, this problem does not exist)

<! Div clear: both -->
    <style type="text/css">
        .father {
            background-color: pink;
            border: solid 2px skyblue;
        }

        .son1 {
            width: 100px;
            height: 200px;
            background-color: blue;
            float: left;
        }

        .uncle {
            height: 100px;
            background-color: red;
        }

        .son3 {
            clear: both;
        }
    </style>
    <div class="father">
        <div class="son1"></div>
        <div class="son3"></div>
    </div>
    <div class="uncle"></div>
    
<! -- Method 2. Add parent element (same principle as 1)-->.clearfix::after{content: ", // Because the default pseudo-elements are line elements display: block, clear: both}<! -- Method 3. Add to the parent element (overflow hide) -->Overflow: hidden // (Principle: Because Overflow: hidden triggers the BFC rule, the elements that float when the BFC renders the page also participate in the calculation of height)<! Set the height of the parent element manually -->
Copy the code

4. Summary of floating exercises

  1. The starting position of a floating element is from the parent element’s content area, and does not include inside and outside margins or borders
  2. Floating elements can float again inside

5. Reference series

reference

Landing the mechanism

Ruan greatly fluctuated understanding