float/文档流

float : left | right | none | inherit;
文档流是文档中可显示对象在排列时所占用的位置。
浮动的定义: 使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
clear : left | right | both | none | inherit; 元素的某个方向上不能有浮动元素。clear:both;在左右两侧均不允许浮动元素。

清除浮动方法

加高度　　问题:扩展性不好

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .box{

                height:200px;

                border:1px solid red;

            }

            .item{

                width:200px;

                height:200px;

                background-color: black;

                float:left;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <div class="item"></div>

        </div>

    </body>

</html>

父级浮动问题:页面中所有浮动元素都加浮动，margin左右自动失效(floats bad!)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .box{

                float: left;

                border:1px solid red;

            }

            .item{

                width:200px;

                height:200px;

                background-color: black;

                float:left;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <div class="item"></div>

        </div>

    </body>

</html>

inline-block 问题:margin左右auto失效

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .box{

                display: inline-block;

                border:1px solid red;

            }

            .item{

                width:200px;

                height:200px;

                background-color: black;

                float:left;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <div class="item"></div>

        </div>

    </body>

</html>

空标签问题:ie6最小高度19px;(解决后ie6下还有2px偏差)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .box{

                border:1px solid red;

            }

            .item{

                width:200px;

                height:200px;

                background-color: black;

                float:left;

            }

            .clearfix{

                clear:both;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <div class="item"></div>

            <div class="clearfix"></div>

        </div>

    </body>

</html>

br清浮动问题:不符合工作中:结构、样式、行为，三者分离的要求

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .box{

                border:1px solid red;

            }

            .item{

                width:200px;

                height:200px;

                background-color: black;

                float:left;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <div class="item"></div>

            <br clear="all"/>

        </div>

    </body>

</html>

after伪类清浮动方法(现在主流方法)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .box{

                border:1px solid red;

            }

            .item{

                width:200px;

                height:200px;

                background-color: black;

                float:left;

            }

            .clearfix{

                *zoom:1;

            }

            .clearfix:after{

                content:" ";

                display: block;

                clear:both;

            }

            /*

             * after伪类：元素内部末尾添加内容；

             * :after{ //IE6,IE7下不兼容

             *         content:"添加的内容";

             * }

             * zoom:缩放

             *   触发IE下haslayout，使元素根据自身neir计算宽高

             *   FF不支持

             */

        </style>

    </head>

    <body>

        <div class="box clearfix">

            <div class="item"></div>

        </div>

    </body>

</html>

overflow:hidden;清浮动方法问题:需要配合宽度或者zoom兼容IE6，IE7

overflow:scroll | auto | hidden; overflow:hidden;溢出隐藏(裁刀！)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            /*清除浮动：清除浮动元素的父级*/

            .box{

                border:1px solid red;

                overflow: hidden;

            }

            .item{

                width:200px;

                height:200px;

                background-color: black;

                float:left;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <div class="item"></div>

        </div>

    </body>

</html>

BFC、haslayout
- BFC(block formatting context)标准浏览器　
  - float的值不为none
  - overflow的值不为visible
  - display的值为table-cell,table-caption,inline-block中的任何一个
  - position的值不为relative和static
  - width | height | min-width | min-height:(!auto)　
- haslayout IE浏览器
  - writing-model:tb-rl
  - -ms-writing-model:tb-rl
  - zoom:{!normal}
浮动的特征
- 块在一排显示
- 内联支持宽高
- 默认内容撑开宽度
- 脱离文档流
- 提升层级半层