谈一谈浮动

1. 一个元素浮动后会脱离标准流，不占位置，在标准流排版分为水平（行内+行内块级）和垂直（块级），而浮动流排版只有水平排版方式，只能设置某个元素左对齐或者右对齐，没有居中对齐，所以不可以使用margin：0 auto了

2. 在浮动流布局中不再区分块级元素/行内元素/行内块级元素，他们都水平排版，而且都可以设置宽高，所以一个元素设置浮动后，和行内块级元素很像（水平排版，可设置宽高）

3. 浮动元素会脱离标准流，脱标之后，后面的元素会上浮顶替前面元素空出的位置，前面一个元素左浮盖住后面一个元素，浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来确定

4. 浮动元素具有贴靠现象，如果父元素的宽度足以显示所有的浮动元素，那么浮动的元素会并排显示，若宽度不足，会从最后一个元素开始往前贴靠，如果都空间不足，就会换行贴靠在父元素的左边或者右边

5. 浮动元素具有字围现象，浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,实现文字环绕图片的效果

6. 如何清除浮动以解决浮动元素的父元素的高度塌陷问题

   标准流中元素的内容可以撑起父元素盒子的高度，但是浮动的元素是不可以撑起的

（1）给父元素设置高度（少用，因为难以确定具体高度）
（2）给后面的元素添加clear属性

none: 默认取值, 按照浮动元素的排序规则来排序
left: 不要找前面的左浮动元素right: 不要找前面的右浮动元素 both: 不要找前面的左浮动元素和右浮动元素），但是可能会造成margin值的失效，因为找不到看齐的对象了。

（3）给前面元素的末尾添加一个伪类

.box1::after {
            content: '';
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }

好处：可以给第一个盒子设置margin-bottom，可以给第二个盒子设置margin-top,并且可以撑起第一个盒子的高度，做到样式和结构分离

（4）overflow：hidden

加上这个之后，父级的高度就随子级容器及子级内容的高度而自适应，但是在ie6中无效，还需要加入*zoom:1.

补充：overflow：hidden的三个作用：
1.超出部分隐藏
2.清除浮动
3.解决外边距塌陷问题，给父元素设置o：h，子元素设置margin-top之后，父元素不会被顶下来