浮动与清除浮动

网页布局的核心就是用CSS来摆放盒子位置，把盒子摆放到合适的位置需要用到CSS的定位机制。CSS的定位机制有三种，普通流(标准流)，浮动和定位。

(1)普通流

实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列。

(2)浮动

(1)浮动最早是用来做文字环绕图片效果的。后来才开始用浮动的特性来布局。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div {
            width: 500px;
            height: 500px;
            border: 1px solid hotpink;
            margin: 0 auto;
        }

        img {
            float: right;
        }
    </style>
</head>

<body>
    <div>
        江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。
        忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。
        忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。
        忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。
        忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。
        忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。
        <img src="我好气呀.jpg" alt="">
        忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。
        忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。
        忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。
        忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。
       忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不江南,日出江花红胜火,春来江水绿如蓝。

    </div>
</body>

</html>

(2)体会浮动:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* display: inline-block; 转换为行内块元素 就可以放在一行上 有宽度高度,但是元素之间存在空隙。 */
            float: left;
        }

        div:nth-child(2) {
            background-color: hotpink;
        }

        div:nth-child(3) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

(3)浮动体现在漂浮在标准流的上方

浮动指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。
浮动脱离标准流,不占位置,会影响标准流,只有左右浮动。
浮动首先创建包含块的概念(包裹)。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div:first-child {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
            /* 浮动体现在漂浮在标准流的上方 */
        }

        div:last-child {
            width: 140px;
            height: 300px;
            background-color: skyblue;
            /* float: right; */
        }
    </style>
</head>

<body>
    <div>200</div>
    <div>300</div>
    <!-- 如果两个盒子都不加浮动,就是标准流,块级元素自上而下显示 -->
</body>

</html>

(4)浮动的元素总是找距离它最近的父级元素对齐，但是不会超出内边距的范围。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .father {
            width: 500px;
            height: 300px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
            /* 子类的浮动不会超过父类的内边框和内边距 */
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: right;
            /* 浮动总是找最近的父亲盒子对齐 */
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

(5)浮动的元素排列位置

浮动的元素排列位置,跟上一个元素(块级)有关系。
如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；
如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> section {
            width: 800px;
            height: 550px;
            background-color: pink;
        }

        section div:first-child {
            width: 200px;
            height: 200px;
            background-color: purple;
            float: left;
        }

        section div:last-child {
            width: 249px;
            height: 300px;
            background-color: skyblue;
            float: left;
        }
    </style>
</head>

<body>
    <section>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

</html>

(6)元素添加浮动后,元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或默认的内容的多少。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div {
            height: 200px;
            background-color: pink;
            float: left;
            /* 块级元素添加浮动后,具有行内块的特性. */
        }

        span {
            background-color: skyblue;
            height: 100px;
            float: left;
            /* 行内元素添加浮动后,具有行内块的特性. */
        }
    </style>
</head>

<body>
    <div>昨夜雨疏风骤</div>
    <div>昨夜雨疏风骤</div>
    <span>人生天地间,忽如远行客.</span>
    <span>人生天地间,忽如远行客.</span>
</body>

</html>

浮动总结：
浮动的目的是为了让多个块级元素在同一行上显示。

清除浮动所造成的影响:
为什么清除浮动？
由于浮动元素不再占用源文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题就需要清除浮动。本质是为了解决父级元素因为子级浮动引起内部高度为0的问题。

清除浮动的方法：

(1)额外添加法

W3C推荐的做法是通过在浮动元素末尾添加一个空的标签 <div style=”clear:both”></div>或者其他标签亦可。

        .clear {
            clear:both;
        }

优：通俗易懂,书写方便.
劣：添加许多无意义的标签,结构化较差。

(2)父级添加overflow属性方法
通过触发BFC的方式，可以实现清除浮动效果。

overflow: hidden;

可以给父级添加：overflow为hidden | auto | scroll都可以实现
优:代码简洁
劣:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。

(3)使用after伪元素清除浮动
:after方式为空元素的升级版,好处就是不用单独加标签了。
使用方法：

        .clearfix:after {
            /* 转换为块级元素 */
            display: block;
            content: ".";
            height: 0;
            /* 隐藏盒子 */
            visibility: hidden;
            /* 清除浮动 */
            clear: both;
        }
        .clearfix {
            /* *代表只有IE6.7能识别的特殊符号,zoom就是ie6.7清除浮动的方法 */
            *zoom:1;
        }

优：符合闭合浮动思想结构语义化正确
劣：由于IE6-7不支持:after，使用zoom:1触发hasLayout。
代表网站：百度、淘宝网、网易等。

(4)使用before和after双伪元素清除浮动

       .clearfix:before, .clearfix:after {
            content: "";
            /* 触发bfc 防止外边距合并 */
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

优：代码更简洁
劣：由于ie6,7不支持：after，使用zoom：1触发ayout。
代表网站：小米、腾讯等。