关于清除浮动

一，为什么要清除浮动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>clearfix</title>
    <style>
        div {
            border-radius: 4px;
            margin: 5px;
            border: 1px solid #0084c7;
        }
       .div1 {
        }
        .div2 {
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div2"></div>
</div>
</bod
</html>

由于div2设置了float:left使其脱离文档流，没有形成div1包裹div2的效果

二 如何清除浮动

1.解决这个bug的方法有很多，比较简单的做法如下代码，

<div class="div1">
    <div class="div2"></div>
    <div style="clear: both;"></div>
</div>

插入一个"空白"div，设置起clear：both清除浮动，clear属性的原理是为元素添加足够多的外边距，使其垂直下降到 浮动框的下面。但是这中做法的缺点就是添加了无用的标签，使html不能符合语义规范。

2.当前流行的一个做法是利用伪类：before和：after，代码如下，

       .clearfix {
            zoom: 1;
        }

        .clearfix:after, .clearfix:before {
            content: "";
            display: block;
            clear: both;
        }
<div class="div1 clearfix">
    <div class="div2"></div>
</div>

 添加消除浮动的类.clearfix后能正常显示div。注，zoom：1是兼容IE7。

3.还有一种方法是给外层父级div设置属性overflow：hidden。

.div1 {
            /*background-color: #398439;*/
            width: 300px;
            overflow: hidden;
        }

        .div2 {
            width: 100px;
            height: 100px;
            /*background-color: #003366;*/
            float: left;
            clear: left;
        }

 

三，关于clear的另一个用途：实现垂直布局

 要实现如图所示的布局，左侧的2个div浮动到父级div左侧

可以利用左侧第二个div的clear：left来实现，这样，内部div和文字就是同意级别，而不用将左侧的2个div包裹起来。

posted @ 2015-06-01 22:31  bdbk  阅读(214)  评论(0)  编辑  收藏  举报