清除浮动到底该清除谁的浮动

Question

            <div  id="aa">#aa元素</div>
    <div  id="bb">
        <a>a元素</a>
        <p>p元素</p>
            </div>    

<style>
        #aa{
            width:100px;
            height:100px;
            border:red dotted 1px;
            float:left;
        }
            div#bb{
                width:500px;
                border:blue dotted 2px;
                margin-left:120px;
                
            }
            a{
                float:left;
                width:120px;
                height:50px;
                border:red dotted 1px;
            }
            p{
                width:300px;
                height:50px;
                background-color:yellowgreen;
                margin:0px;
                clear:left;
            }
        </style>
        
问题是让p元素清除浮动，p元素应该清除<a>元素的浮动，但是为什么连#aa元素的浮动也清除了？？？？

Answer 1

clear:left的意思就是p的左边不允许有浮动元素，而不论这个浮动元素在哪个层级。如果你想让#bb与#aa相互不影响，应该在#bb下生成 bfc

div#bb{
    width:500px;
    border:blue dotted 2px;
    margin-left:120px;
    overflow: hidden;
}