On the margin cascading of BFC

css:

<style>
      .column {
        width: 31.33%;
        background-color: green;
        float: left;
        margin: 0 1%;
      }
      .column:last-child {
        float: none;
        overflow: hidden;
      }
</style>
    <div class="container">
      <div class="column">column 1</div>
      <div class="column">column 2</div>
      <div class="column">column 3</div>
    </div>

    <ul style="float:left">
      <li>111</li>
      <li>111</li>
    </ul>
    <ul style="float:left">
      <li>111</li>
      <li>222</li>
    </ul>

the effect is as shown in the figure. Why is the gap between 1 and 2 empty and the margin between 2 and 3 collapse?

Jul.12,2022

.column:last-child {
    float: none;
    overflow: hidden;
  }

this style float: none; acts on the last 3, so there is Margin overlap

to create a BFC for a HTML element, any one or more of the following conditions can be satisfied:
1, the value of float is not none.
2, the value of position is not static or relative.
3. The value of display is inline-block, table-cell, flex, table-caption or inline-flex
4. The value of overflow is not visible

.

float: none just get rid of this style. The above boss has already said in great detail

Menu