论述浮动的原理和浮动带来的影响，并列举常见的闭合浮动的方法。

Posted 2020-06-09

1.浮动的原理
浮动是让某元素脱离标准流，漂浮在标准流之上的一种布局方式。任何元素被设置为浮动元素后，就表明它是块级元素，拥有宽高属性。
2.浮动带来的影响
1)影响它的兄弟元素的位置
一个元素设置了浮动样式后，会影响它的兄弟元素，至于如何影响，要看它的兄弟元素是块级元素还是内联元素。如果兄弟元素是块级元素，会无视这个浮动元素，即兄弟元素和浮动元素共处同行，浮动元素会覆盖兄弟元素。除非这些 div 设置了宽度，并且父元素的宽度不足以包含它们，这样兄弟元素才会被强制换行；如果兄弟元素是内联元素，则会尽可能围绕浮动元素。
2)会导致父元素高度自动清零
浮动元素脱离了普通流，导致父元素高度塌陷。
闭合浮动：使浮动元素闭合，从而减少浮动带来的影响。
3.闭合浮动的方法大体分为两类：
1)利用 clear 属性。可以通过在浮动元素末尾添加一个带有clear: both属性的空div 来闭合元素，也可以通过:after伪元素在浮动元素末尾添加一个内容为一个点并带有clear: both属性的元素来闭合元素。
①.用空div闭合浮动

.clr1{ clear:both; } 
<div class="box1">
    <div class="fl">左浮动</div>
<div class="fr">右浮动</div>
  <div style="clr1">清除浮动</div>
</div>

 

②.用: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 (Block Formatting Contexts, 块级格式化上下文)，使其父元素可以包含浮动元素。
①.给浮动元素的父元素添加浮动，不建议采用。
②.给浮动元素的父元素添加display: table-cells，这样会改变盒子模型，也不建议使用。
③.把浮动元素的父元素overflow属性设为hidden或auto，可以闭合浮动。另外在IE6中还需要触发hasLayout，例如为父元素设置容器宽高或设置zoom：1。