前言
如下列HTML代码:
<div id="main"> <div id="content"></div> </div>
当子容器content的高度改变时,父容器高度并没有实时改变,这时候把父容器的高度设置成auto是不行的
我们的需求就是要父容器自动改变。
有三种方式可供选择:
方式一
增加一个清除浮动,让父容器知道高度。请注意清除浮动的容器中有一个空格
<div id="main"> <div id="content"></div> <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> </div>
方式二
增加一个容器,在代码中存在,但在视觉中不可见
<div id="main"> <div id="content"></div> <div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div> </div>
方式三
增加一个BR并设置样式为clear:both
<div id="main"> <div id="content"></div> <br style="clear:both;" /> </div>