网上看到很多都是绝对定位法，margin负值法，自身浮动法，但是全部浮动设置百分比也行，不知道这种有没其他问题；
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Title</title>
<style>
p{
float: left;
}
.left,.right{
background: #000;
width: 30%;
height: 50px;
}
.mid{
height: 50px;
width: 40%;
}
</style>
</head>
<body>
<p class="left"></p>
<p class="mid"></p>
<p class="right"></p>
</body>
</html>
巴扎黑2017-04-11 13:28:13
其实实现的方式有很多种，个人喜好问题，我想你是想要一种实现起来比较优雅的方法，不用考虑浮动后塌陷或者别的其他因素的。所以我推荐你使用 flex 布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
</head>
<style>
.box {
display: flex;
justify-content: space-between;
}
.st {
width: 100px;
height: 100px;
background: blue;
}
</style>
<body>
<p class="box">
<p class="st left"></p>
<p class="st mid"></p>
<p class="st right"></p>
</p>
</body>
</html>效果如下：
附上 flex 文章链接 : Flex 布局教程：实例篇
如果对你有用，希望采纳！
怪我咯2017-04-11 13:28:13
<style>
.clearfix:after{
display: block;
content: '';
overflow: hidden;
height: 0px;
width: 0px;
clear: both;
}
.clearfix{
zoom: 1;
}
p{
float: left;
}
.left,.right{
background: #000;
width: 30%;
height: 50px;
}
.mid{
height: 50px;
width: 40%;
}
</style>
<p class="clearfix">
<p class="left"></p>
<p class="mid"></p>
<p class="right"></p>
</p>自身感觉用float的时候 清除浮动 还没有遇见问题
大家讲道理2017-04-11 13:28:13
浏览器宽度小到一定程度就破板了；这三个外面包到一个定宽的容器里防止这种情况的发生；
PS：再给你一个纯CSS3的，自带响应式效果；（别和我说还有浏览器不支持这样的屁话）
<html>
<header></header>
<style type="text/css" media="screen">
body{
margin: 0;
font-size: 16px;
position: relative;
}
.container{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
max-width: 1920px;
min-width: 1000px;
margin: 0 auto;
min-height: 100%;
position: relative;
}
.flex1,.flex2,.flex5{
min-height: 100%;
position: relative;
}
.flex1{
flex: 1;
min-width: 100px;
background-color: red;
}
.flex2{
flex: 2;
min-width: 200px;
max-width: 200px;
background-color: blue;
}
.flex5{
flex: 5;
background-color: orange;
}
</style>
<body>
<p class="container">
<p class="flex1">
Left Block
</p>
<p class="flex5">
Flex-size Blcok
</p>
<p class="flex2">
Right Block
</p>
</p>
</body>
</html>