你的位置:首页 > 网页设计

[网页设计]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

上图中的子元素(绿色),就没有被父元素(粉红色的线条)包裹住,这就是塌陷问题。上图中的黑色div本该在两个绿色下方,但现在却是这样,这就是没有清除浮动带来的问题。

咦,那浮动这个东东,怎么会如此坏的呢?!!

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

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

针对它的特性对症下药就好了,哈哈哈。

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

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

常规的解决方法就是利用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>      <!--在尾部加入一个带有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?!!IE6、7尼玛又不支持它。

是哈,我们再来想办法看看怎么优化优化。

由于IE6、7有个hasLayout,这个hasLayout是么子东西呢,当hasLayout属性值为false的时候,元素的尺寸和位置就由最近拥有布局的祖先控制;当为true时,会达到与BFC类似的效果。所以我们可以利用这一点解决IE6、7对:after的藐视。。

利用zoom来触发IE6、7是一个比较通用的做法,所以我们结合zoom和after,就得到了一个相对靠谱的解决方案了。

代码如下:

/*hack手段针对IE6、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手段触发IE6、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