首页 > 代码库 > 闭合浮动

闭合浮动

      当我们利用CSS中的float来进行浮动定位时,浮动的元素会脱离原来的文档流。容器的高度不能自动变化以适应其中内容的高度的变化,我们希望父容器能包含子容器,因此解决方法为闭合浮动。

如果没有闭合浮动则会出现以下情况:

一:

    如果前面的元素浮动了,后面的元素可能会受影响,解决这个问题可以设置后面的元素也浮动

float:left;

技术分享

二:

      如果两个元素都浮动了,但原来包裹这两个元素的父元素高度就会变为0

技术分享

闭合浮动的四种方法:

法一:为父元素添加overflow:hidden

法二:为父元素添加display:inline-block

法三:同时浮动父元素

法四:利用after伪元素闭合浮动

#boxMain:after{

content:"";

clear:both;

display:block;   /*将行元素转换为块元素*/

}

在需要闭合浮动的父容器上添加一个clearfix类,这个方法的好处在于他的通用性。

.clearfix:after{

content:"";

clear:both;

display:block;

}

.clearfix{

*zoom:1;

}

 

 

 

 

 

闭合浮动