如何“清除浮动”
清除浮动(Enclosing float): clear:left | right | both | none;
闭合浮动(Clearing float):使浮动元素闭合
目的是解决父盒子高度为0的问题。
方法一:额外标签法
<div class="wrap" id="float1"> <div class="main left">.main{float:left;}</div> <div class="side left">.side{float:right;}</div> <div style="clear:both;">我是额外的标签,用来闭合浮动哒</div> </div>
方法二:使用 br标签和其自身的 html属性
<div class="wrap" id="float2"> <div class="main left">.main{float:left;}</div> <div class="side left">.side{float:right;}</div> <br clear="all"> </div>
方法三:父元素设置overflow: hidden
<div class="wrap" id="float3" style="overflow:hidden; *zoom:1;"> <div class="main left">.main{float:left;}</div> <div class="side left">.side{float:right;}</div> </div>
方法四:父元素设置display:table
<div class="wrap" id="float6" style="display:table;"> <div class="main left">.main{float:left;}</div> <div class="side left">.side{float:right;}</div> </div>
方法五:伪元素(我们采纳)
.clearfix:after { content:””; visibility:hidden; display:block; height:0; clear:both; } .clearfix{ Zoom:1; }
方法六: 双伪元素(我们采纳)
.clearfix:before,.clearfix:after{ display: table; content: ""; } .clearfix:after { clear: both; /* For IE 6/7 (trigger hasLayout) */ } .clearfix { zoom: 1; }
参考地址:那些年我们一起清除过的浮动