BFC之清除浮动篇&clear

时间 2019-11-19

标签 bfc 清除浮动 clear 繁體版

原文原文链接

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

可是，咱们在实现的时候，常常会遇到父元素“塌陷”以及清除浮动问题。例如浏览器

<!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

上图中的子元素（绿色），就没有被父元素（粉红色的线条）包裹住，这就是塌陷问题。上图中的黑色div本该在两个绿色下方，但如今倒是这样，这就是没有清除浮动带来的问题。ide

咦，那浮动这个东东，怎么会如此坏的呢？！！布局

其实，也不怪人家，原本float的设计初衷就不是用在布局，而是文字环绕，无奈，被用在了布局上。优化

强扭的瓜不甜嘛，不过也解渴。ui

针对它的特性对症下药就行了，哈哈哈。spa

浮动框不属于文档中的普通流，当一个元素浮动以后，不会影响到块级框的布局而只会影响内联框（一般是文本）的排列，文档中的普通流就会表现得和浮动框不存在同样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云同样，可是只能左右浮动。正是由于浮动的这种特性，致使本属于普通流中的元素浮动以后，包含框内部因为不存在其余普通流元素了，也就表现出高度为0（高度塌陷）。设计

好了，了解了它的要点，就开始对症下药了哦，哈哈哈。3d

常规的解决方法就是利用clear来清除浮动，以及浮动带来的塌陷问题。code

<!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>
            <!--在尾部加入一个带有clear的块级元素-->
            <div style="clear:both;"></div>
        </ul>
        <div class="div1"></div>
    </body>
</html>

View Code

运行代码，效果图见下：

这样作目的是达到了，可是它是向页面中添加内容来达到效果的，破坏告终构以及毫无语义。

由此，咱们引入伪元素来解决这样的问题。PS:修改的代码中，引入了Nicolas Gallagher大师的代码。

<!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;
            }
            /*用after伪元素，向ul追加一个清除浮动元素*/
            ul:after {
                content:'';
                display:table;
                clear:both;
            }
            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

啊哈，真是这样的。

But，:after?!!IE六、7尼玛又不支持它。

是哈，咱们再来想办法看看怎么优化优化。

因为IE六、7有个hasLayout，这个hasLayout是么子东西呢，当hasLayout属性值为false的时候，元素的尺寸和位置就由最近拥有布局的祖先控制；当为true时，会达到与BFC相似的效果。因此咱们能够利用这一点解决IE六、7对:after的藐视。。

利用zoom来触发IE六、7是一个比较通用的作法，因此咱们结合zoom和after，就获得了一个相对靠谱的解决方案了。

代码以下：

/*hack手段针对IE六、7*/
.fix {
    *zoom:1;
}
/*大众浏览器*/
.fix:after {
    content:"";
    display:table;
    clear:both;
}

修改上面的demo代码以下：

<!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;
                /*hack手段触发IE六、7的haslayout*/
                *zoom:1;
            }
            /*用after伪元素，向ul追加一个清除浮动元素*/
            ul:after {
                content:'';
                display:table;
                clear:both;
            }
            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