码迷,mamicode.com
首页 > 其他好文 > 详细

闭合浮动

时间:2016-11-03 23:19:07      阅读:427      评论:0      收藏:0      [点我收藏+]

标签:oom   src   高度   bsp   需要   nbsp   float   通用   四种   

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

}

 

 

 

 

 

闭合浮动

标签:oom   src   高度   bsp   需要   nbsp   float   通用   四种   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!