CSS浮动

首先了解两个概念

• 正常文档流：将窗体自上而下分成一行一行。块元素独占一行；相邻行内元素在每行中按从左到右依次排列。
• 脱离正常文档流：相对于正常文档流而言，指它所显示的位置和文档代码顺序不一致。

浮动float：

(浮动元素本身会生成一个块级框，不管其本身是何元素出身）

1. left: 元素向左浮动；
2. left: 元素向右浮动；
（忽略“none"和"inherit"这两个用不上的属性值）

代码示例.png

结果1.png

是否发现文字有点不协调呢？

清除浮动clear：

1. left: 清除左浮动；
2. left: 清除右浮动；
3. both:左右浮动一起清除

将上列添加以下一行代码：

p{clear:both;}

以下为结果：

结果2.png