clear伪类使用

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

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

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

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

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

<!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{
            /*这5个属性缺一不可*/
            content: '.';
            visibility: hidden;
            clear: both;
            display: block;
            height: 0px; /*如果没有这个 容器会比float元素行多出一行字的高度*/

        }
        </style>
    </head>
    
    <body>
        <div class='root'>
        <div class='pos'>
            <div class='fl'></div>
            <div class='fl fl2'></div>
        </div>
        </div>
    </body>
</html>