float带来的问题

Posted 2023-05-18

参考技术A float带来的问题
1.float: right 右浮动时，靠右换行（错行）的解决方法
描述：当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥。把右浮动的标签放在正常标签的前面即可。

解决：把右浮动的标签放在正常标签的前面即可。

2.浮动造成换行问题
描述：例子如：两个div设置了左浮动，想第三个div换行
（如果第三个也是左浮动，则宽度小于父元素剩余宽度的话，就不会换行；如果第三不是浮动等特殊情况，会覆盖第一个div位置，但文字不会覆盖而是环绕）

解决：给第三div设置style="clear:both"

3.浮动会造成 父元素塌陷 问题。
如果一个父元素的所有子元素都是浮动的，子元素的浮动确定了自身位置，尽管子元素有高度，但是不会影响到父元素的高度，那么这个父元素高度就是0（若没有指的宽度，就是父元素宽度）。如果想要父元素内的浮动元素占有父元素的高度，就需要清除浮动。

还有两种不推荐的解决方法：

网页布局之float

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