Home >Web Front-end >HTML Tutorial >BFC之清除浮动篇&clear_html/css_WEB-ITnose
BFC之清除浮动篇&clear_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:25:161247browse
我们在日常代码生活中，或多或少会利用浮动来布局，例如导航布局，如下图所示：
但是，我们在实现的时候，经常会遇到父元素“塌陷”以及清除浮动问题。例如
<!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> 上图中的子元素（绿色），就没有被父元素（粉红色的线条）包裹住，这就是塌陷问题。上图中的黑色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> 运行代码，效果图见下：
这样做目的是达到了，但是它是向页面中添加内容来达到效果的，破坏了结构以及毫无语义。
由此，我们引入伪元素来解决这样的问题。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> 啊哈，真是这样的。
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>