CSS学习笔记三

浮动

可以用float来实现元素的浮动，即是元素脱离文档流。
float可选值：

• none 默认在文档流中排列
• left 元素脱离文档流，向页面左侧浮动
• right 元素脱离文档流，向页面右侧浮动

需要注意的是，浮动元素不会超过上边的兄弟元素，最多一边齐。最重要的是注意浮动引起的高度塌陷。

高度塌陷问题的解决方法：

• 开启隐藏属性BFC（Block Formatting Context）
• 使用clear清除浮动元素对当前元素的影响（最优方案）

定位

定位指的是将元素摆放到页面任意位置，通过定位可以任意的摆放元素，可通过position属性设置元素定位。

可选值：

• static：默认值，默认不开启定位；
• relative：开启元素相对定位；
• absolute：开启元素绝对定位；
• fixed：开启元素固定定位（绝对定位的一种）；

开启元素定位需要（非static）可通过偏移量来定位；
left：左偏移量
right：右偏移量
top：上偏移量
bottom：下偏移量

• 相对定位是相对于其位置定位

position: relative;

• 绝对定位：
  相对于离他最近的开启了定位的祖先元素进行定位的（若祖先都没有开启定位则根据浏览器窗口定位）；
  会使元素脱离文档流；
  会改变元素性质——内敛元素变成块元素
  position: absolute;
• 固定定位也是一种绝对定位:
  它永远相对于浏览器窗口定位;
  固定位置，不随滚轮滚动改变;

            position: fixed;