浮动和定位

一、浮动

http://vrg123.com/

文档流：网页中元素排列顺序。
标准文档流（默认）：从上到下，从左到右
浮动流：
左浮动：从左到右，从上到下；右浮动：从右到左，从上到下

浮动原理：
1、浮动元素将脱离标准文档流，浮动元素后面的标准元素会依次向上填充
2、浮动元素不会遮挡行内元素
3、浮动元素变成行内块级元素，内容有多宽它就有多宽
4、不允许浮动元素覆盖文字

浮动带来的问题：父盒子塌陷

如何解决父盒子塌陷（扩展盒子高度/清除浮动的影响）：
1、设置父盒子高度
2、使用overflow：visible | hidden | scroll属性来清除浮动（绝对定位不生效）；值为默认值visible时，是没有清除浮动的作用的。
3、clear：left | right | both
4、让父元素与子元素一起浮动（不推荐）
5、使用after伪类（clear属性）

overflow与clear在清除浮动时的区别：