BFC has a feature: child elements in the BFC container do not affect the outer elements, and vice versa;
however, as shown in the following picture, the blue box floats to the left and the orange box does not float. The blue box affects the orange box, covers the orange box, and makes the contents of the orange box move 100px to the right. It does not match the description of the above characteristics. Why? do I understand it wrong?
Code:
<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>