1. Why didn't the parent collapse in Example 1?
  2. How did the parent adapt to the float container, because they are pulled out of the stream?
  3. Based on this, we can conclude that ClearFix is ​​not needed in those containers where position:fixed & position:absolute installed?

 .cf:after { clear: both; content: ""; display: block; } .container { background-color: yellow; border: 1px solid red; } .fixed { left: 0; position: fixed; right: 0; top: 0; } .static { position: static; margin: 60px -8px; } .float-left { background-color: orange; float: left; height: 40px; width: 20px; } .float-right { background-color: blue; float: right; height: 40px; width: 20px; } 
 <!-- Пример 1 Fixed -->> <div class="container fixed"> <div class="float-left">1</div> <div class="float-right"></div> </div> <!-- Пример 2 Static -->> <div class="container static"> <div class="float-left">2</div> <div class="float-right"></div> </div> <!-- Пример 3 Static + ClearFix --> <div class="container static cf"> <div class="float-left">3</div> <div class="float-right"></div> </div>

    1 answer 1

    Because a block formatting context is being created that can be read about here or here.

    Here it is listed that it creates:

    9.4.1 Block formatting contexts

    Floats , absolutely positioned elements, block containers (such as inline-blocks , table-cells , and table-captions ) to the viewport)

    A block formatting context can be created by:

    1. root element or something that contains it
    2. floats (items whose float is not equal to none)
    3. absolutely positioned elements (elements whose position value is either absolute or fixed )
    4. inline-blocks (elements with display: inline-block)
    5. table cells (elements with display: table-cell, set by default for table cells)
    6. table headers (elements with display: table-caption set by default for table headers)
    7. elements for which the value of the overflow property differs from visible
    8. flex blocks (elements with display: flex or inline-flex)

    Look further specification .

    Specifically, the line describes the behavior of such an element if it contains a floating element:

    10.6.7 'Auto' heights for block formatting context roots

    In addition, the bottom is the bottom of the bottom line . Formatting context are taken into account, for example, floats are not included.

    If such an element contains floating descendants whose height is greater than the parent, then the parent will increase to wrap them. Therefore, wipe cleaning is not needed.