CSS之浮动（float)

1、浮动

• 传统布局有：标准流、浮动、定位。
• 浮动可以让多个盒子在一行显示（无空隙）也可以指定空隙的大小，而行内元素或行内块元素在一行显示时会有空隙，消除这个空隙比较困难。
• 标准流：标签按照默认的方式排列，是最基本的网页布局
• 网页布局第一准则：多个块级元素纵向排列找标准流，横向排列找浮动。

（1）简介

语法：float:none || left || right;
注意：

• none：默认值，不浮动；left：向左浮动，right：向右浮动；
• 浮动要与父级搭配使用
• 一个元素浮动，按照道理其兄弟也需要浮动
• 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

特点：

• 可以改变默认的排列方式
• 脱离标准普通流的控制（浮）移动到指定位置（动）即脱标。
• 浮动的盒子不再保留原先的位置，若两个盒子一个是浮动，一个是标准流，则会实现叠加。
• 所有浮动的盒子在一行内显示且顶端对齐，浮动的元素是紧挨在一起的，不会有空隙若一行装不下则会另起一行。
• 不管是什么元素，在添加浮动之后都有类似行内块元素的特点

（2）为了约束浮动元素的位置

我们页面布局的策略一般是：先用标准流的父元素排上下的位置，之后内部元素采取浮动排列左右位置，这符合网页布局的第一准则。
注意：

• 若是行内元素有了浮动则可以设置宽度与高度，不需要转换。
• 浮动的盒子太过自由，经常以浏览器为准，但可以先设置父级再使得子级浮动。

2、清除浮动

• 原因：因为父级盒子在多数情况下不方便给高度，但是子级盒子浮动不占有位置，最后父级盒子高度为0，影响下面标准流的盒子
• 策略：闭合浮动
• 本质：清除浮动对标准流的影响
• 清除浮动的方法有：额外标签法、给父级添加overflow属性、给父级添加after伪元素、给父级添加双伪元素。后面两种方法使用较多

（1）额外标签法

• 也称隔墙法，是W3C推荐的。
• 在兄弟级后面添加空白的标签（必须是块级标签或者Br标签）设置其样式为clear：left；（清除左浮动）或者clear：right；（清除右浮动）或者clear：both；（清除两侧的浮动）。
• 缺点：增加了许多额外的标签，不是很好

（2）给父级添加overflow属性

• 语法：overflow：hidden||auto；
• 两个值都可以清除浮动，也能防止外边距的合并。

（3）给父级添加after伪元素

• 是额外标签法的升级版
• 语法：

 .clearfix:after{
            content: "";
            display:block;
            height: 0;
           clear: both;
           visibility: hidden;

        } 
        /* 照顾ie6，ie7 */
        .clearfix{
            *zoom: 1;
        }

（4）给父级添加双伪元素

• 语法：

.clearfix:after,.clearfix:before{
            content: "";
            display:table;

        } 
        .clearfix:after{
            clear: both;
        }
        /* 照顾ie6，ie7 */
        .clearfix{
            *zoom: 1;
        }