#page{width:520px;}
.main{width:200px;float:left;padding-left:110px}
.nav{width:200px;float:right;}
.sub{float:left;width:100px;margin:10px 0 -100px 10px;}
.nav{border:1px dashed #cccccc;}
.sub{border:1px dashed #cccccc;height:280px;}
.nav{height:380px;}
.main{border:1px solid #cccccc;}
<body>
<div id="#page">
<div class="main">
<div class="sub"></div>
</div>
<div class="nav"></div>
</div>
</body>
我的理解是当子元素浮动时,父元素没有定义高度的情况下是没有高度的,为什么main这个div有高度为194px
浮动会触发元素的BFC属性,触发了BFC元素计算高度的时候要把浮动的子元素高度算进去的
参照BFC