浮动

传统网页布局的三种方式

1. 普通流（标准流/文档流）

就是标签按照规定好的默认方式进行排列

例如 ： 行内元素 ： 一行可以放多个 (span , a ,i ,em)
        块元素 ： 一行只能放一个 (div , p ,h1~h6 , ul ,ol >

为什么 需要浮动 ？

**有很多的布局效果，标准流没有办法完成，因此可以利用浮动来完成布局 **， 因为浮动可以改变元素标签默认的排列方式

浮动最典型的应用 ： 可以让多个块级元素一行内排列显示

网页布局第一准则

多个块级元素纵向排列找标准流， 多个块级元素横向排列找浮动

浮动 float

选择器 { float ： 属性值}

    属性值 ： left（左浮动）
    属性值 ： right （右浮动）

原本的样子是

给两个div都添加 左浮动

给一个添加左浮动，一个添加右浮动

浮动特性

脱标（脱离标准流）

浮动的盒子不再保留原来的位置

这里只给第一个div 添加浮动，所以 此时 第一个div脱离标准流了，那么第二个盒子就会在第一个盒子的底部

浮动元素一行显示

若 给多个盒子都设置了浮动，那么他们会按照属性值在一行内进行显示 且顶端对齐排列

注 ： 若父级盒子的宽度装不下这些浮动的盒子，那么剩下的盒子会另起一行对齐

浮动元素具有行内块特性

可以看出 ，给div 设置浮动之后，它们可以在一行内进行显示，而且还可以进行设置 宽高，所以 说 是具有行内块特性

浮动元素经常搭配标准流的父元素进行搭配使用

先准备一个大的父盒子，然后再把 要浮动的子元素添加进行

3种最常见的布局方式

自上而下排列

左右

分成更多块

浮动布局的注意点

经常和 标准流的父元素搭配使用

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

一个元素浮动了，按道理其它div也需要浮动

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

为什么需要清除浮动

因为 父盒子在很多情况下，不方便给高度，但是子盒子设置了浮动了，所以此时子盒子不占有位置，最后父盒子的高度是0 ，那么 若父盒子下面再来一个标准流盒子，就会影响这个标准流盒子

清除浮动

本质

就是清除浮动元素带来的影响

不过，若父盒子本身有高度，那么就不需要清除浮动

清除浮动之后，父级就会根据浮动的子盒子来自动检测高度，父级有了高度，就不会影响下面的标准流了

清除

选择器{clear:属性值}

    属性值： left / right / both（都清除）

清除浮动的策略是 ： 闭合浮动 ： 只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

清除浮动方法

额外标签法 （隔墙法） W3C推荐

就是给 浮动元素末尾添加一个空的标签 此时新添加的标签必须是块级元素，不能是行内元素

此时 second 会压在第一个父盒子的下面

使用 ：

优点 ： 通俗易懂，方便书写

缺点 ： 添加许多无意义的标签，结构化较差

父级添加 overflow 属性

可以给父元素添加 overflow属性 ，将其属性值设置为 hidden、auto或者scroll

优点 ： 代码简洁

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

父级添加 after伪元素

可到 09 css3新特性 中 查看什么是伪元素

优点 ： 没有增加标签，结构更简单

缺点 ： 照顾低版本浏览器

父级添加 双伪元素

就是给 前后都添加一个盒子

display ： table 表格 ，就是把新增的两个行内元素转为 表格元素，放在一行中

优点 ： 代码更简洁

缺点 ： 照顾低版本浏览器