SOURCE

<div class="aside"></div>  
<div class="main"></div> 

div {  
    width:300px;  
}   
.aside {  
      width: 100px;  
      height: 150px;  
      float: left;  
      background: black;  
}  
.main {  
     height:200px;  
     background-color:red;  
     /* overflow: hidden; */
}

/* 
（1）float导致父Box出现塌方
（2）如果.main是BFC就不会与float元素重叠，
可以通过overflow:hidden设置为BFC

    参考：https://www.imooc.com/article/9723
    BFC触发规则：
    1. 浮动元素，float 除 none 以外的值
    2. 绝对定位元素，position（absolute，fixed）
    3. display 为以下其中之一的值inline-block, table-cell, table-caption, flex,inline-flex
    4. overflow 除了 visible 以外的值（hidden，auto，scroll）
    BFC下的布局：
    1.  在BFC下，内部的Box会在垂直方向，一个接一个地放置。
    2.  Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box 的margin会发生重叠
    3.  在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此。
    4.  BFC的区域不会与float box重叠。
    5.  计算BFC的高度时，浮动元素也参与计算

 */