关于BFC的margin层叠问题

Question

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>

效果如图，为什么1和2的间距空出来了，2和3之间的margin会折叠？

Answer 1

.column:last-child {    float: none;    overflow: hidden;   }这个样式float: none;作用于最后3，所以出现Margin重叠一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：1、float的值不是none。2、position的值不是static或者relative。3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex4、overflow的值不是visible

Answer 2

float: none把这个样式去掉就好了 上面这个大佬已经说的很详细了