css浮动、清除浮动和定位

目录

1.浮动  float

 2.清除浮动

3.定位

---

1.浮动  float

float：none默认值 不浮动   left左浮动   right 右浮动

一般情况下，容器元素都是独占一行的，如图：

因为div是块元素，即使容器宽度很小，页面中一行可以容下三个div，div2也不会排在div1后边，是独占一行的。当实际页面需要横向摆放时，就需要用到浮动。

浮动就是让某个div元素脱离文档流不占位，漂浮在上。

当给容器设置浮动时，容器不会再占有原来的位置，后边的容器就会顶替该位置，如图：

给div1设置了左浮动时，div1就会脱离文档流，不占位，div2就会占据div1的位置，div1浮于div2上方

 当给div1设置右浮动时，div1就会脱离文档流，不占位，div2就会占据div1的位置，div1浮于右侧。需要注意的是，文字、图片、表单框、表