BFC之清除浮动篇&clear

我们在日常代码生活中，或多或少会利用浮动来布局，例如导航布局，如下图所示：

BFC之清除浮动篇&clear

但是，我们在实现的时候，经常会遇到父元素“塌陷”以及清除浮动问题。例如

<!DOCTYPE html> 
    <head>
        <title>Float</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            ul {
                border:1px solid pink;
            }
            li {
                width:100px;
                height:100px;
                margin-left:10px;
                background:green;
                float:left;
                list-style-type:none;
            }
            .div1 {
                width:100px;
                height:100px;
                background:black;
            }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
        </ul>
        <div class="div1"></div>
    </body>
</html>

View Code