CSS布局之浮动

学习前端有一段时间了，整理一下学习心得，顺便给初学者一些参考。（持续更新）
如果有写的不对的地方，还望指教。

---

今天来说说CSS布局中的浮动——float属性。

先来看看float有什么特性：
1.默认宽度为内容宽度
2.向直定的方向一直移动（left,right）
3.对元素脱离文档流，对内容在同一文档流

我们来看一下例子：

    <div id="div1">
        <div id="test1">111</div>
        <div id="test2">222</div>
        <div id="test3">333</div>
    </div>

---css
    #div1{
            background: #555;
        }

我们写了三个标签每做任何处理，可以看到他们是处于同一个文档流依次排列的。

如果我们给这三个标签设置浮动。

        #div1{
            background: #555;
            border: 1px solid red;
        }
        #test1{
            float: left;
            background:#999;
        }
        #test2{
            float: left;
            background:#eee;
        }
        #test3{
            float: left;
            background:#fff;
        }

这三个div的父元素div1就没有高度了，也就是说这三个div对于元素而言脱离了文档流。

由于浮动的这个特性，所以我们经常需要清除浮动。

清除的办法也有很多，比如说给父元素设置高，或者说给父元素设置overflow:hidden;

浮动元素相对于元素脱离文档流，但是对于内容是在同一个文档流的，所以设置overfloat，可以紧贴内容。

但是比较常见的方法是使用clear方法。

    <div id="div1" class="clear">
        <div id="test1">111</div>
        <div id="test2">222</div>
        <div id="test3">333</div>
    </div>

---css
      .clear：both;

但是clear只能应用于后续元素的，只能应用于块级元素，也就是说要给父元素设置clear。

还有一种常见的方法：通过clearfix方法。

同样的给父元素添加一个类，名字叫做clearfix

        .clearfix:after{

　　　　　　content:"";//设置内容为空

　　　　　　height:0;//高度为0

　　　　　　line-height:0;//行高为0

　　　　　　display:block;//将文本转为块级元素

　　　　　　visibility:hidden;//将元素隐藏

　　　　　　clear:both//清除浮动

　　　　　}

　　　　.clearfix{

　　　　　　zoom:1;为了兼容IE

　　　　}