关于clear:both;后有固定高度的原因及解决方法

不知道从什么时候开始，拥有clear:both;元素的父元素偶尔会出现固定的高度，之前给父元素加diaolay:hidden;临时处理，一直没搞清楚原因，今天又出现该问题，花费半天时间找出了原因记录一下

<div class="app">
      <div class="app-side">
          <div style="height: 100px;"></div>
      </div>
      <div class="page-con">
          <div id="box">
              <div style="clear: both"></div>
          </div>
      </div>
</div>
 
.app-side{ float:left; width: 200px;}
.page-con{ margin-left: 200px;}

以上代码可以两列布局, 但是#box的盒子始终最低高度为100px。这是因为clear 的原理是，clear 会为元素添加足够的空白空间，使到该元素的位置会放置在它前一个浮动元素之下。

.app-side盒子虽然和#box盒子并不在一个元素中，但是却在同一个BFC (Block Formatting Contexts, 块级格式化上下文)中，clear清除浮动后添加的空白空间也包括.app-side的100px高。

解决方法就是让.app-side和.page-con在不同的互不影响的BFC中，比如.app-side盒子不用float，而是用绝对定位。