css 浮动

在css中，有一个我们又爱又恨的属性，浮动。爱，因为通过浮动，我们能很方便地布局；恨，浮动之后遗留下来太多的问题需要解决，

特别是IE6-7。很多初学者不明白浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？下面我们一起来学习一下吧！

首先，为什麽要设置浮动呢？而在网页布局中，我们常常需要将两个或者是多个div并排放置。由于div独占一行，并排是不可能实现的。

所以我们需要采用浮动布局。

浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会

影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的

时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。

正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。

在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

浮动可以说是所有CSS属性中的“破坏之王”，浮动的元素脱离标准流不受标准流约束，浮动的元素可以互相贴靠，浮动的元素有字围绕效果。

我们再来看看，浮动的元素脱离标准流不受标准流约束会产生什麽效果。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style type="text/css">  
        .box1{  
            float: left;  
             100px;  
            height: 200px;  
            background-color: green;  
        }  
  
        .box2{  
             200px;  
            height: 300px;  
            background-color: red;    
        }  
  
    </style>  
</head>  
<body>  
    <div class="box1"></div>  
    <div class="box2"></div>  
</body>  
</html>

上面代码中，绿色的盒子设置了浮动属性，所以它会脱离标准流，红色的盒子就以为自己是标准流中的第一个盒，被渲染在上方，而漂浮在上方的绿盒子会遮盖部分红盒子。

下面再来看一个例子，让我们对浮动进一步加深了解。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style type="text/css">  
    span{  
         300px;  
        height: 400px;  
        background-color: blue;  
    }  
    </style>  
</head>  
<body>  
    <span>这是span</span>  
    <span>这是span</span>  
    <span>这是span</span>  
    <span>这是span</span>  
</body>  
</html>

　由于span是行内标签，他们会显示在一行，而且你设置的长宽对span是没有影响的，如果我们将span设成浮动，span的长宽发生了变化。原因是

浮动让span脱离了标准文档流的约束，使得span不在受标准文档流的约束，所以可以对span设置宽高了。　

最后来说说浮动可以产生文本文本围绕的效果。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style type="text/css">  
          
        .box1{  
            float: left;  
            100px;  
            height: 100px;  
            background-color:green;  
        }  
          
    </style>  
</head>  
<body>  
    <div class="box1">1</div>  
    <p>
       我是内容我是内容我是内我是内容我是内容我是内容我是内容我是内容
       我是内容我是内我是内容我是内容我是内容我是内容我是内容我是内容
       我是内我是内容我是内容我是内容我是内容我是内容我是内容我是内容



  </p>

 </body> </html>

测试的结果显示绿色盒子脱离标准流不会覆盖p中的文本，这就是浮动可以产生文本围绕的效果。

曾今看到过有人这麽理解浮动中图文环绕，感觉很形象，很有趣。

文字围绕图片：当图片不浮动时，图片在厕所，文字们在餐厅。当图片浮动时，图片冲了水，

文字们闻声而来到了厕所。谁知图片没出坑，于是文字们依次在厕所里排起了队。这时就会

出现文字围绕图片摆放的排列方式。

图片与文字清除浮动的故事：当图片浮动时，想让文字不为之所动，就用clear吧，喝了这杯忘情水，

图片就算冲了水除了坑文字也仍旧不进厕所。

总结

浮动元素：

1.浮动元素不占父级宽高
2.浮动元素都在一行内显示
3.浮动元素都可以设置宽高和margin/padding
4.浮动元素默认内容撑开宽高
5.可以去除浏览器的默认缝隙
6.浮动元素标签会发生层叠，但是内容不会

目前主流清除浮动方法

clearfix:after {content:”.”; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

原理：通过伪类在结束加上空，然后清除浮动

优点：完美兼容

overflow清除浮动

原理：overflow清除浮动

优点：可以做到兼容

缺点：当子元素高/宽大于父级时，会出现滚动条，当然如果父级大于子级，完全可以如此使用

父级加高 height：给父级设定高度

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单，代码少，容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用