clear属性能把父元素自动撑高，其背后的实现原理是什么？

   <div id="container" style="border:1px dotted #CCCCCC">
        <div id="floatLeft" style="float: left;width:20em;height:10em;border:1px solid c72d2d;background-color: beige">float:left</div>
        <div id="clearBoth" style="background-color: #00a23f;border:1px solid c72d2d;clear:both;width:50em;height:1em">clear both </div>
    </div>

针对上面的代码有几个问题，请教大家：
1。div#container(height=auto)的高度将被自动计算，包含div#floatLeft和div#clearBoth，其背后的实现规范是什么呢？
2.clear属性的规范有云

The floats that are relevant to be cleared are the earlier floats
within the same block formatting context.

这个怎么理解呢？
3.按规范所述 div#container 加上 overflow:hidden属性后将形成一个BFC，那么这个BFC和div#floatLeft形成了BFC有什么关系么？有包含关系？
4.根元素也能形成一个BFC，那么是不是可以这样理解:div#floatLeft在这个BFC里?