【前端】overflow也可以实现左侧固定，右侧自适应布局？？

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>

最后结果

【前端】overflow也可以实现左侧固定，右侧自适应布局？？

问题

照原先的记忆中，float的子元素并不会占据父宽度，不过从结果看，它占用了，然后我测试了一下，关键属性是
.main的overflow

回答

为父级元素设置 overflow 是清除浮动的方法之一

上面为原回答，更新下答案。

在 CSS 中有很多看似不符合“预期”的表现，比如题主的这个问题，还有类似 margin 塌陷，overflow 清除浮动的问题。

这涉及 CSS2.1 中 BFC 的概念。

BFC 规定了浏览器渲染该 block 的规则。

规则如下：

  1. 内部的 Box 会在垂直方向，一个接一个地放置。

  2. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠

  3. 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

  4. BFC 的区域不会与 float box 重叠。

  5. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

  6. 计算 BFC 的高度时，浮动元素也参与计算

根据渲染规则第 3、6 条，利用 BFC 便可以实现自适应两栏布局。

而一个 Block 是不是 BFC 其中有一个规则正是 “overflow 不能为 visible”（规则很多，不列举），所以这解释了题主的问题。

同学提到了BFC，我搜了一下，看了这篇文章，知道了原理：BFC的理解
文中提到：

  1. BFC的区域不会与float的元素区域重叠；

  2. 计算BFC的高度时，浮动子元素也参与计算（float解决父元素高度坍塌原理）

  3. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；

是的，可以实现左侧固定，实现多列布局，具体什么原理没有详细探究
sf问答列表采用的就是这种形式
【前端】overflow也可以实现左侧固定，右侧自适应布局？？

以上是 【前端】overflow也可以实现左侧固定，右侧自适应布局？？ 的全部内容， 来源链接： utcz.com/a/80061.html

回到顶部