BFC相关问题
双越老师好！我最近在练习“两栏布局”（左边固定，右边自适应）的时候遇到了一点问题，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
margin: 0;
padding: 0;
}
.left {
height: 100px;
width: 100px;
background-color: yellow;
position: absolute;
/* display: inline-block; */
}
.right {
height: 100px;
width: 100%;
background-color: darkorange;
margin-left: 100px;
}
</style>
</head>
<body>
<div class='left'></div>
<div class='right'></div>
</body>
</html>
我主要想问的是.left的样式 position: absolute那里，我一开始写的是display: inline-block，结果不仅没有达到预期效果，而且还导致右边的区块向下移动了一点点，请问这是什么原因？而改成position: absolute才奏效，使得左右的区块处于一行。另一个问题是：display: inline-block和position: absolute不是都触发BFC效果吗？为什么在这里会出现差异呢？（可能我对BFC理解不够深刻吧）
333
收起
正在回答 回答被采纳积分+3
1回答
双越
2022-12-18 20:52:05
相似问题
登录后可查看更多问答，登录/注册
