首页 > 其他 > 详细

clear伪类使用

时间:2014-03-19 17:57:42      阅读:396      评论:0      收藏:0      [点我收藏+]

都知道float会脱离文档流  用什么办法撑开父元素呢? 手动在本区块的所有float元素之后加上一个块元素并对其添加clear:both

可以 但是这样还要再去修改html页面  而且多了一个仅仅是为了控制布局却没有实际表现意义的元素  不好..

将float的父元素也设定为float  这样会导致更深的问题

将父元素设为overflow:hidden 很不错的办法 推荐!  但是我希望内部的元素能够超出 怎么弄呢?

用伪类!只需要修改css  就能向html中添加一个元素啦!

bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Untitled Document</title>
        <style type="text/css">
        .root{
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 50px;
        }
        .pos{

        }
        .fl{
            width: 300px;
            height: 200px;
            float: left;
            background-color: lime;
        }
        .fl2{
            background-color: black;
        }
        .pos:after{
            /*这四个属性缺一不可*/
            content: ‘.‘;
            visibility: hidden;
            clear: both;
            display: block;

        }
        </style>
    </head>
    
    <body>
        <div class=‘root‘>
        <div class=‘pos‘>
            <div class=‘fl‘></div>
            <div class=‘fl fl2‘></div>
        </div>
        </div>
    </body>
</html>
bubuko.com,布布扣

clear伪类使用,布布扣,bubuko.com

clear伪类使用

原文:http://www.cnblogs.com/cart55free99/p/3611650.html

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