首页 > 其他 > 详细

闭合浮动

时间:2016-11-03 23:16:49      阅读:446      评论:0      收藏:0      [点我收藏+]

      当我们利用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;

}

 

 

 

 

 

闭合浮动

原文:http://www.cnblogs.com/cyjy/p/6028597.html

(1)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!