两列布局(两列宽度均自适应）

公司项目需要使用两列布局，要求左右列宽度自适应，左列高度随着内容自动出现滚动条，网上的方案有很多种，研究了一下采用float+BFC的解决方案。

最终实现效果如图：

原理：

1. 浮动元素的块状兄弟元素会无视浮动元素的位置，尽量占满一整行，这样该兄弟元素就会被浮动元素覆盖。
2. 若浮动元素的块状兄弟元素为BFC，则不会占满一整行，而是根据浮动元素的宽度，占据该行剩下的宽度，避免与浮动元素重叠。
3. 浮动元素与其块状BFC兄弟元素之间的margin可以生效，这将继续减少兄弟元素的宽度。

HTML代码：

    <div class="parent">
        <div class="left">
            <div class="left__item"></div>
            <div class="left__item"></div>
            <div class="left__item"></div>
            <div class="left__item"></div>
        </div>

        <div class="right">
            <p>right</p>
        </div>
    </div>

CSS代码：

.parent {
    overflow: hidden;
}

.left {
	float: left;

    max-height: 150px;
    margin-right: 20px; 
    overflow-y: auto;
    background-color: lightpink;
}
.left__item{
	width: 180px;
	height: 80px;
	background-color: lightgreen;
}
.right {
    overflow: hidden;
    background-color: lightblue;
}

参考文章：《什么是BFC》