CSS学习系列------CSS定位机制、定位模型

写在前面

• CSS定位机制
  • 普通流（标准流）
  • 浮动
  • 定位模型

---

一、CSS定位机制

1、普通流（标准流）

普通流（标准流）：默认，元素自动从上往下，从左往右的排列。

2 、浮动

（1）浮动：实现块级元素在一行内展示。

（2）浮动规则

• 元素向左 / 右移动
• 浮动元素脱离标准流
• 浮动元素碰到包含框或另一个浮动框，浮动停止
• 浮动元素之后的元素将围绕它，之前的不受影响

（3）浮动的基本语法：position:left（靠左）、position:right（靠右）、position：center（无）

（4）浮动溢出：元素使用浮动后会脱离普通流，出现“浮动溢出“

（5）清除浮动（闭合浮动）：

• 语法： clear:none（默认) | left | right | both
• 常用方法：
  • 使用空元素。例如<div class = "clear">