CSS两栏布局

#html和基本样式

左边固定，右边自适应的两栏布局

<div class="wrapper">
    <div class="left">左边固定</div>
    <div class="right">右边自适应</div>
</div>

* {
    box-sizing inhert
}
.wrapper {
    padding 20px
    border 1px solid #ddd
    box-sizing border-box
}
.left,.right {
    border 1px solid #999
}

.left {
    width 200px
}

后面所有样式，都是扩展样式，也就是在原样式的基础上加上class

1. inline-block 方案

.wrapper1 {
    font-size 0 // 消除inline-block元素之间的空格bug，或者也可以用元素间注释的方式
}

.left1, right1 {
    display inline-block
    vertical-align top // 顶端对齐
    font-size 14px
}

.right1 {
    width calc(100% - 200px)
}

缺点： - 需要消除inline-block元素的间距bug - 需要设置vertical-align: top满足顶端对齐

双float 方案

.wrapper2 { overflow auto // 清除浮动 }

.left2, right2 { float left }

.right2 { width calc(100% - 200px) }

和1中的方法原理相同

优点： 不用解决inline-block的间隙bug，不用顶端对齐

缺点: 需要清除浮动

3. absolute+ margin-left 方案

.left3 {
    position absolute
}
.right3 {
    margin-left 200px
}

缺点： - 绝对定位依赖父元素定位 - 若左侧盒子超过右侧盒子高度，那么只能通过设置父容器的min-height来解决

4. float + BFC 方案

.wrapper4 {
    overflow auto
}
.left4 {
    float left
}
.right4 {
    overflow auto // 利用overflow属性实现BFC，此盒子不会和浮动元素重叠
}

缺点： 父元素需要清除浮动

5. flex方案

.wrapper5 {
    display flex
    align-items flex-start
}
.right5 {
    flex 1
}

可以说是最简便的方法了，flex容器的一个默认属性值:align-items: stretch;。这个属性导致了列等高的效果。 为了让两个盒子高度自动，需要设置: align-items: flex-start

缺点： 兼容问题你懂的