CSS浮动

一、浮动元素特性

1、块级元素在标准文档流中没有设置宽度，宽度继承父级元素，一旦该元素浮动，那么他 的宽度就不确         定，有可能尽可能的窄，也有可能尽可能的宽，所以元素要设置浮  动，我们最好给他一个宽度

2、元素一旦设置浮动，就将脱离标准文档流，进入浮动流，在标准文档流中元素将不再占 位，父级盒子         高度将会塌陷，如果所有的子元素都浮动，父级盒子高度为0

3、浮动流层级高于标准文档流，若浮动元素和标准文档流中的元素位置有重合，那么浮动 元素肯定会显        示在上层，遮盖住标准文档流中元素的块，但是不会遮盖住他的内容， 内容会对浮动元素形成环绕效        一个元素只要设置浮动就将变成一个块果

4、浮动元素的位置

一个元素设置浮动，首先看浮动元素的前一个元素是否设置了浮动，若设置了浮动，那么浮动元素将跟在           前一个元素后开始浮动
如果前一个元素没有浮动，这个时候跟前一个元素的类型有关
1)前一个元素是块级，那么浮动元素将会在该块级元素下一行开始浮动
2)前一个元素是行内或行内块，那么浮动元素在前一个元素同一行开始浮动

5、一个元素只要设置浮动就将变成一个块

6、元素设置浮动，脱离标准文档流，在标准文档流中不占位，如果他后面的元素还处于标 准文档流中并且是一个块级元素，那么这个块级元素将会去占浮动元素之前的位    置，才会有位置上的重合

二、子元素浮动，父级盒子若没有设置高度，高度就会塌陷，我们需要扩展父级盒子的高度，让父级盒子在页面中正         常占位，我们把这个手段称为 清浮动

1、给父级盒子一个合适的高度
2、在父级盒子中最后一个子元素的位置加<div></div>    个这个div设置height:0; clear:both
3、父级元素:after{content:"";height:0; clear:both;}
4、给父级元素设置overflow:scroll/auto/hidden