极客观点
项目管理
HarmonyOS
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>测试</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.app {
width: 800px;
height: 600px;
margin: 20px auto;
overflow: hidden;
}
.siderbar {
width: 200px;
float: left;
}
.main {
position: relative;
overflow: hidden;
background-color: #eee;
}
</style>
</head>
<body>
<div class="app">
<div class="siderbar">
我是侧边栏
</div>
<div class="main">
我是主体
</div>
</div>
</body>
</html>最后结果
问题
照原先的记忆中，float的子元素并不会占据父宽度，不过从结果看，它占用了，然后我测试了一下，关键属性是
.main的overflow
html5
为父级元素设置 overflow 是清除浮动的方法之一
上面为原回答，更新下答案。
在 CSS 中有很多看似不符合“预期”的表现，比如题主的这个问题，还有类似 margin 塌陷，overflow 清除浮动的问题。
这涉及 CSS2.1 中 BFC 的概念。
BFC 规定了浏览器渲染该 block 的规则。
规则如下：
根据渲染规则第 3、6 条，利用 BFC 便可以实现自适应两栏布局。
而一个 Block 是不是 BFC 其中有一个规则正是 “overflow 不能为 visible”（规则很多，不列举），所以这解释了题主的问题。