css左右布局的几种实现方式和优缺点

记录一下左右布局的实现方式，实现的具体效果是，左侧固定宽度，高度适中等于父元素的高度，父元素的高度由右侧内容决定：

html代码如下：

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

1.flex布局实现左右布局，css代码如下：

.parent{
width: 600px;
margin: 100px auto 0;
background: red;
display: flex;
}
.left{
flex: 100px 0 0;
background: green;
}
.right {
flex: 1;
text-align: center;
font-size: 36px;
background: yellow;
}

效果图：


　　

优点：只依靠css实现布局要求，书写方便，很容易记住。

缺点：pc端兼容性不好，对于手机项目的开发，也需要兼容。

2.使用浮动

.parent{
width: 600px;
margin: 100px auto 0;
background: red;
}
.left{
width: 100px;
height: 100%;
float: left;
background: green;
}
.right {
margin-left: 100px;
text-align: center;
font-size: 36px;
background: yellow;
}

　　效果图：


从上面的图，我们可以看到，虽然右侧宽度自适应了，但是我们尽管给左侧设置了height: 100%，也不能让左侧跟随右侧内容撑开高度，只能通过js去设置。

　　优点：

　　缺点：左侧高度需要通过js去设置

3.左侧定位

.parent{
width: 600px;
margin: 100px auto 0;
background: red;
position: relative;
}
.left{
width: 100px;
height: 100%;
position: absolute;
background: green;
left: 0;
top:0;
}
.right {
margin-left: 100px;
text-align: center;
font-size: 36px;
background: yellow;
}

　　效果图：


　　优点：兼容性好，纯css实现

　　缺点：相对于flex，代码多一些