关于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，而是用绝对定位。

巴特西

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

最新文章

热门文章