因为将子元素都设置为浮动后，父元素内部就好像没有东西了，被掏空了，无法被子元素撑起来。所以就会出现塌陷的情况。
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .first, .second { float:left; background:red; width:100px; height:50px; margin:10px; } #wrap { border:10px solid black; width: 300px; } </style> </head> <body> <div id="wrap"> <div class="first"></div> <div class="second"></div> </div> </body> </html>
所以就需要清理浮动。
- 在元素最后再添加一个div空标签或br标签。在写clear：both||left||right||none。表示哪些边框不挨着浮动框。
- 有个叫bfc的概念（block formatting content）用这个就是为了让那个因为包含很多浮动子元素而产生高度塌陷的父元素不再塌陷。把子元素包含在内。bfc的特性：
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠，BFC不会重叠浮动元素，BFC可以包含浮动
- 如何形成bfc：
- float:none 以外的值；
- position：absolute||fixed；
- overflow：hidden||auto；
- display：inline-block||table-caption||table-cell；
- 但每种都会有各自相关的新问题（末尾的文章有详细的说明）。
- 使用：after伪元素来处理。
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
<div id="wrap" class="clearfix"> //这里在父元素写了一个class：clearfix。然后就解决问题了。 <div class="first"></div> <div class="second"></div> </div> .clearfix:after{ content:"."; display:block; height:0; visibility:hidden; clear:left; } #wrap { border:10px solid black; width:320px; }
这个好像是比较好的一种方法了。
这是昨天看的关于闭合浮动的文章。那些年我们一起清除过的浮动。
posted on
