<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
方法一：定位
-->
<style>
.wrap{
width:900px;
margin:0 auto;
position: relative;
}
#left{
width:200px;
height:500px;
background: #ccffff;
position: absolute;
top:0;
left:0;
}
#right{
width:700px;
height:500px;
background: #ffcccc;
position: absolute;
top:0;
right:0;
}
</style>
<!--
方法二： 纯浮动式
-->
<style>
.wrap{
width:900px;
margin:0 auto;
overflow: hidden;
}
#left{
width:200px;
height:500px;
background: #ccffff;
float: left;
}
#right{
width:700px;
height:500px;
background: #ffcccc;
float: left;
}
</style>
<!--
方法三： 混合浮动+普通流
-->
<style>
.wrap{
margin:0 auto;
width:80%;
}
#left{
width:200px;
height:500px;
background: #ccffff;
float: left;
}
#right{
height: 500px;
background: #ffcccc;
margin-left:200px;
}
</style>
显示失败是什么鬼
可以使用display：flex；
浮动只需要写在父元素，然后创建bfc解决高度塌陷就好了。
最基础的的方法就是左边框给左浮动，右边框给右浮动，举例你的方法三
.wrap{
margin:0 auto;
width:80%;
}
#left{
width:200px;
height:500px;
background: #ccffff;
float: left;
}
#right{
width: 200px;
height: 500px;
background: #ffcccc;
float: right;
}