CSS浮动 Day13

1.浮动

传统网页布局的三种方式：普通流（标准流）   浮动  定位

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

浮动的特性：

1、浮动的元素会脱离标准流
    相当于飘到了空中
    在标准流中就不占位置
2、浮动的元素比标准流高出半个级别
    可以覆盖标准流中的元素
3、浮动找浮动
    下一个浮动元素会在上一个浮动元素后面左右浮动
4、浮动会受到上面元素边界的影响
5、浮动的元素有特殊的显示效果
    1、一行可以显示多个
    2、可以设置宽高
注意点：浮动的元素不能通过text-align：center或者margin：0 auto，让浮动的元素水平居中

2.常见网页布局

浮动布局注意点：

 1.浮动和标准流的父盒子搭配

        先用标准流的父元素排列上下位置，，之后内部子元素采取浮动排列左右位置

 2.一个元素浮动了，理论上其它的兄弟元素也要浮动

        浮动的盒子只会影响后面的标准流，不会影响前面的标准流。

3.清除浮动

语法 ： 选择器 { clear：属性值；}

clear ：both；

清除浮动的策略：闭合浮动

3.1 清除浮动的方法

1.额外标签法也称隔墙法
    （1）在父元素的最后添加一个块级元素
    （2）需要给添加的块级元素设置清除浮动的核心代码：clear：both
            缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂，最后一个子元素一定要是块元素 

2.给父元素设置一个overflow：hidden

        缺点：无法显示溢出的部分

3.：after伪元素法

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

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

4.双伪元素清除浮动

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

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }