网页布局之float

Posted 2020-10-05 专注前端开发

一、浮动的原理
浮动是让某元素脱离标准流，漂浮在标准流之上的一种布局方式。任何元素被设置为浮动元素后，就表明它是块级元素，拥有宽高属性。
二、浮动带来的影响
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。