BFC 有一个特性:BFC容器里面的子元素不会影响到外面的元素,反之亦然;
然而如下图,蓝色盒子为左浮动,橘色盒子没有浮动。蓝色盒子影响了橘色盒子,遮盖了橘色盒子,还使得橘色盒子的内容向右挪了100px。与上述特性描述不符,为什么呢,我是不是理解错了?
代码:
<style>
body {
width: 300px;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: blue;
}
.main {
height: 200px;
background: orange;
}
</style>
<body>
<div class="aside">左浮动</div>
<div class="main">没浮动</div>
</body>
BFC容器里面的子元素不会影响到
此容器
外面的元素