码迷,mamicode.com
首页 > Web开发 > 详细

CSS万能闭合代码

时间:2017-08-02 13:14:23      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:play   isp   css   style   无法   span   blog   lock   代码   

给需要闭合的DIV(class为clearfix)加上如下的CSS样式(万能闭合代码)即可:

.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}

简化写法:

.clear{clear:both;height:0px;overflow:hidden;}>

例如:

<div class="clearfix" style="border:1px solid red;">
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

如果不给class加上万能闭合代码,则无法使外层的div框包围float的div。这是因为内部的DIV因为float:left之后,外部就丢失了clear:both和 display:block的样式。当然也可以使外部div也进行浮动或者在最后新增内部clear:both的div。

CSS万能闭合代码

标签:play   isp   css   style   无法   span   blog   lock   代码   

原文地址:http://www.cnblogs.com/xwtcm/p/7273135.html

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