add: float 属性的特点

03-CSS进阶/03-CSS布局.md

@@ -1,15 +1,27 @@
 
 ## 前言
 
-### CSS 布局的演化
+### 常见的布局属性
 
-- 早期以table为主
+（1）`display` 确定元素的显示类型：
 
-- 后来一技巧性布局为主（这些技巧原本并不是用于布局的）
+- block：块级元素。
 
-- flexbox/grid
+- inline：行内元素。
 
-- 响应式布局
+- inline-block：对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
+
+（2）`positon` 确定元素的位置：
+
+- static：默认属性值。
+
+- relative：相对定位。相对于元素本身进行偏移，**不会改变它所占据的空间**。
+
+- absolute：绝对定位。相对于父元素中最近的 relative/absolute 进行偏移，会脱离文档流。音标：[ˈæbsəluːt]。
+
+- fixed：固定定位。相对于可视区域固定，会脱离文档流。
+
+`relative`、`absolute`、`fixed`这三个属性，可以结合 z-index 来设置层级。
 
 ### 常见的布局方法
 
@@ -21,31 +33,41 @@
 
 对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
 
-4、**flex 布局**：为布局而生，非常灵活，是最为推荐的布局写法。唯一的缺点是兼容性问题：
+4、**flex 布局**：为布局而生，非常灵活，是最为推荐的布局写法。
 
-20191005_1200.png
+唯一的缺点是兼容性问题：
+
+![](http://img.smyhvae.com/20191005_1200.png)
 
 上图中可以看到， flex 布局不支持 IE9 及以下的版本。如果你的页面不需要处理 IE浏览器的兼容性问题，则可以放心大胆地使用 flex 布局。
 
-### 常见的布局属性
+flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。
 
-（1）`display` 确定元素的显示类型：
+5、响应式布局。
 
-- block：块级元素。
+## float 属性
 
-- inline：行内元素。
+> 是 CSS 中比较麻烦的一种属性。
 
-- inline-block：对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
+### float 属性的特点
 
-（2）`positon` 确定元素的位置：
+- 元素浮动
 
-- static：默认属性值。
+- **脱离文档流，但不脱离文本流**
 
-- relative：相对定位。相对于元素本身进行偏移，**不会改变它所占据的空间**。
+代码举例：
 
-- absolute：绝对定位。相对于父元素中最近的 relative/absolute 进行偏移，会脱离文档流。音标：[ˈæbsəluːt]。
+下面这两个并列的`div1`和`div2`，默认是在标准流中的：
+
+![](http://img.smyhvae.com/20191005_2029.png)
+
+在此基础之上，如果给`div1`增加`float: left`属性后，效果如下：
+
+![](http://img.smyhvae.com/20191005_2035.png)
+
+上图中，可以看到，`div1`设置为浮动后，会脱离文档流，不会对`div2`的布局造成影响；但是`div1`不会脱离文本流，它会影响`div2`中文字的排列。
+
+其实，这正是 float 属性本身的含义。float 本身是用来做图文混排、文字环绕的效果。
 
-- fixed：固定定位。相对于可视区域固定，会脱离文档流。
 
-`relative`、`absolute`、`fixed`这三个属性，可以结合 z-index 来设置层级。