网上看到很多都是绝对定位法，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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
其实实现的方式有很多种，个人喜好问题，我想你是想要一种实现起来比较优雅的方法，不用考虑浮动后塌陷或者别的其他因素的。所以我推荐你使用
flex布局。效果如下：
附上
flex文章链接 : Flex 布局教程：实例篇如果对你有用，希望采纳！
浮动可以，但是会导致父元素高度塌陷
自身感觉用float的时候 清除浮动 还没有遇见问题
这样直接用浮动和百分比的话，考虑到浏览器宽度发生改变时，写起来和看起来就很不爽了。
可以啊。你还可以用display:inline-block;
浏览器宽度小到一定程度就破板了；这三个外面包到一个定宽的容器里防止这种情况的发生；
PS：再给你一个纯CSS3的，自带响应式效果；（别和我说还有浏览器不支持这样的屁话）