关于FLOAT浮动

FLOAT浮动

相关概念：

文档流：文档流是文档中可显示对象在排列时所占用的位置。

关于FLOAT：

1. FLOAT特性：加了浮动的元素，会脱离文档流，沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
2. FLOAT取值：left，right，none（默认）

元素怎样浮动？

1. 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
2. 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。
3. 浮动元素之前的元素将不会受到影响
4. 如果把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

简单示例
设置两个颜色不同的块，实现效果如下：
接下来为黄色的块设置浮动
实现效果如下图所示：
此时黄色方块在红色方块之上，黄色方块实现了浮动，不占据位置，脱离标准普通流的控制。

清除浮动

注：清除浮动，准确来说不是清除浮动本身，而是清除浮动所造成的影响。解决了父级元素因为子级元素浮动造成的内部高度为0的影响。
清除浮动的方法

利用clear属性清除float浮动

1. 固定宽高:不推荐，不能把高度固定死，且不适合做自适应的效果。
2. 父元素浮动:不推荐，因为父容器浮动也会影响到后面的元素。
3. overflow : hidden (BFC规范)，如果有子元素想溢出， 那么将会受到影响。
4. display : inline-block (BFC规范)， 不推荐使用，父容器会影响到后面的元素。
5. 设置空标签:不推荐,会多添加一个标签。
6. after伪类:推荐使用，是空标签的加强版。
   下面我对利用after伪类清除浮动的方法进行示例：

.clearfix:before,
        .clearfix:after {
            display: table;
            content: "";    /*不用有内容也可以*/
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

这种方法优点明显，首推大家使用。