一、浮动的原理
浮动是让某元素脱离标准流,漂浮在标准流之上的一种布局方式。任何元素被设置为浮动元素后,就表明它是块级元素,拥有宽高属性。
二、浮动带来的影响
1、影响它的兄弟元素的位置
一个元素设置了浮动样式后,会影响它的兄弟元素,至于如何影响,要看它的兄弟元素是块级元素还是内联元素。如果兄弟元素是块级元素,会无视这个浮动元素,即兄弟元素和浮动元素共处同行,浮动元素会覆盖兄弟元素。除非这些 div 设置了宽度,并且父元素的宽度不足以包含它们,这样兄弟元素才会被强制换行;如果兄弟元素是内联元素,则会尽可能围绕浮动元素。
2、会导致父元素高度自动清零
浮动元素脱离了普通流,导致父元素高度塌陷。
闭合浮动:使浮动元素闭合,从而减少浮动带来的影响。
三、闭合浮动的方法大体分为两类
1、利用clear属性。可以通过在浮动元素末尾添加一个带有clear: both属性的空div 来闭合元素,也可以通过:after伪元素在浮动元素末尾添加一个内容为一个点并带有clear: both属性的元素来闭合元素。
A、用空div闭合浮动
.clr1{ clear:both; } <div class="box1"> <div class="fl">左浮动</div> <div class="fr">右浮动</div> <div style="clr1">清除浮动</div> </div>
B、用:after伪元素闭合浮动
.clr2:after{ clear:both; display:block; content:‘.‘; overflow:hidden; visibility:hidden; height:0; } //谷歌,火狐 .clr2{ clear:both; zoom:1; } //IE <div class="box2 clr2"> <div class="fl">左浮动</div> <div class="fr">右浮动</div> </div>
2、触发该浮动元素父元素的BFC,使其父元素可以包含浮动元素。
A、给浮动元素的父元素添加浮动,不建议采用。
B、给浮动元素的父元素添加display: table-cells,这样会改变盒子模型,也不建议使用。
C、把浮动元素的父元素overflow属性设为hidden或auto,可以闭合浮动。另外在IE6中还需要触发hasLayout,例如为父元素设置容器宽高或设置zoom:1。
时间: 2024-10-12 18:51:56