如何实现两栏布局，高度相等，右边固定宽度400px，左边自适应

（1）问题分析

该问题主要考核两栏布局的实现方案，实现方式有多种，比如说：1）将右侧div浮动，左侧div设置margin-right；2）固定区采用绝对定位，自适应区设置margin；3）标准浏览器的方法 ；4）双float + calc()计算属性；5）双inline-block + calc()计算属性；6）float + BFC方法；7）flex。面试通常说出3种及其以上为最佳。

（2）核心问题讲解

以flex布局举例说明：
1）flex布局，目前最常用且最简单的方法之一，
2）首先给元素的父元素变成弹性盒子，然后右边的子元素宽度要400px，左边的自适应100%就好了。
注意：但存在兼容性，相关问题要有所了解，比如
1）flex容器的一个默认属性值:align-items: stretch;。这个属性导致了列等高的效果。
为了让两个盒子高度自动，需要设置: align-items: flex-start。
2）设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

（3） 问题扩展

例如一个宽400px高300px的盒子，盒子的子元素需要从左到右从上到下依次排列。首先给父元素使用display: flex; justify-content: space-between; 然后子元素设置宽高。当多个子元素的宽度超过当前父元素的宽度的时候会自动换行

（4） 结合项目中使用