关于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-flex
4、overflow的值不是visible

Answer 2

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