浮动的简单介绍

浮动：float
浮动的定义：使元素脱离文档流，按照指定的方向发生移动，遇到父级或者相邻的浮动元素就停下来。
文档流：是文档可显示对象在排列时所占的位置。(可显示的元素在排列时所占的位置)
float：left（向左浮动）/right（向右浮动）/none（无浮动）

浮动特点：
1、使元素脱离文档流。
2、元素提升层级，提升半层（只能放元素层，内容无法放进去）
3、使内联元素具有宽高。
4、使块元素可以在一行显示。
5、不设置宽度时，宽度由内容撑开。

浮动原则：子元素要在一排显示的话，需要给每一个元素都增加浮动。

使内联元素(inline)具有宽高的方法：
1、设置为内联块(inline-block)。
2、设置为块(block)。
3、设置浮动(float)。

clear属性：当前元素的某个方向不能有浮动元素；如果指定方向有浮动元素时本元素会自动换行。
    取值：left（左边）、right（右边）、both（左右两边）。
清除浮动：清除浮动元素给页面带来的影响。清浮动均在父级上进行。
如果父级元素的高度可以确定的话，那么就可以不用清除浮动，直接给父级设置高度即可。

清除浮动的方法：
    1、给父级增加高度。缺点：大部分情况下父级的高度无法确定。
    2、给父级增加浮动。缺点：扩展性不好，而且改变不了元素对页面的影响。
    3、给父级设置display:inline-block。
        缺点：IE6、7下没有inline-block且父级margin的auto会失效。
    4、给父级增加一个空标签且高度为0.
        缺点：在W3C标准中要求样式、结构、行为三者分离，
                   但是在此方法中为了修改样式引起的问题而修改了结构，不符合标准要求。
                   且在IE6、7下小于19px的元素浏览器会默认修改元素高度为19px。
    5、(推荐)通过after伪类添加空元素，并设置clear:both；display:block
       如：
         .clear:after{
            content: "";
            display:block;
            clear: both;
        }

        在父元素中增加此class即可。
    6、给父级增加overflow:hidden(溢出隐藏)/auto(溢出显示滚动条)/scroll(显示滚动条)。
         缺点：IE6、7、8下没有此样式。
       scroll:不管内容是否溢出，永远会显示滚动条。
       auto:内容溢出后才会显示滚动条。