清除浮动与BFC

当给子元素设置 float 属性时，会出现子元素高度无法撑开父元素高度的问题，如下图所示：

test.png

解决办法有两种：

1. 给父元素的前后伪类设置 clear: both;

.clearfix:before,
.clearfix:after {
  content: ' ';
  display: table;
  clear: both;
}

复制

2.创建 BFC

• position不为static和relative
• overflow不为visible
• display为inline-block, table-cell, table-caption, flex, inline-flex

.main {
    width: 1200px;
    padding: 20px;
    margin: 100px auto;
    overflow: auto; /* 创建 BFC */
}

复制