css两栏宽度自适应

对于做后台管理系统或者一屏页面来说，会涉及到做左右两栏的效果，左边作为导航栏，右边作为主页面。通常情况下，我们首先想到的是使用浮动效果将两栏浮动起来左右放置，但是这样会导致，其中一些内容的位置会出现错位。因此这里，给出了一个两栏宽度自适应的方式，用来解决浮动问题。

给定左边导航栏的宽度为200px，高度为500px。右边的主体内容部分宽高自适应为整个页面剩余的部分。
给导航栏添加浮动效果，这时发现右边的部分浮动到左边的下面，为了调整这一布局，给右边的部分添加overflow:hidden即可。

*注意：
这里会有人问：我不可以直接添加右浮动吗？这样也可以实现左右放置的效果啊！

答：如果添加右浮动那么必须给右边部分设置宽高，这样浮动才会有效果，如果让其进行宽高自适应后，再给其添加浮动，浮动是识别不了宽高的，也就无法显示右边的部分了。

html,body{height: 100%;}
.left{
     float: left;
     width: 200px;
     height: 500px;
     background: darkorange;
}
.right{
     height: 100%;
     background: darkseagreen;
     overflow: hidden;
}