定位与浮动

定位：position

position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

属性	解释
inherit	从父元素继承position属性的值
static	默认的普通流
relative	相对定位，相对于元素本身正常位置（相对于static）进行定位
absolute	绝对定位，相对于第一个祖先元素进行定位
fixed	绝对（固定）定位，相对于浏览器窗口定位

元素与文档流的关系：

属性	关系
relative	相对定位时，无论元素是否移动，元素在文档流中占据且只占据原来的空间（普通流的空间）
absolute	绝对定位时，元素脱离普通流，定位与文档流无关
fixed	脱离普通文档流，固定在浏览器窗口某个位置

注意：使用绝对定位时，若想相对于某个父元素位置定位，需要给父元素添加属性：position:relative；因为absolute是相对于 static 定位以外的第一个父元素进行定位的。

浮动：float

浮动性质：

当区域块宽度不够时，浮动元素自动下挪；

浮动会让元素脱离文档流，但并非完全脱离： 元素甲添加浮动left后，后面的非浮动元素乙占据了甲的位置，与甲重合，但是乙元素的文本内容会受浮动元素的影响并移动以留出空间。

浮动前：

浮动后：注意文本位置的变化。

clear属性：

属性	解释
none	默认值，允许两边都可以有浮动对象；
left	不允许左边有浮动对象
right	不允许右边有浮动对象
both	不允许有浮动对象

对于CSS的清除浮动（clear），一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素

overflow:hidden

根据属性名字来看，hidden应该是隐藏超过区域块元素（一般是float元素）的内容；但是当外层区域没有设置高度时，使用overflow:hidden会扩充外层区域框的高度，直到把内层元素包含进去。