From 64c5959bdfa370d89b7e39dc101e42401e7d6729 Mon Sep 17 00:00:00 2001
From: qianguyihao <qianguyihao@gmail.com>
Date: Sat, 5 Oct 2019 20:41:41 +0800
Subject: [PATCH] =?UTF-8?q?add:=20float=20=E5=B1=9E=E6=80=A7=E7=9A=84?=
 =?UTF-8?q?=E7=89=B9=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 03-CSS进阶/03-CSS布局.md | 74 ++++++++++++++++++++++++++--------------
 1 file changed, 48 insertions(+), 26 deletions(-)

diff --git a/03-CSS进阶/03-CSS布局.md b/03-CSS进阶/03-CSS布局.md
index be00a3d..22b3435 100644
--- a/03-CSS进阶/03-CSS布局.md
+++ b/03-CSS进阶/03-CSS布局.md
@@ -1,32 +1,6 @@
 
 ## 前言
 
-### CSS 布局的演化
-
-- 早期以table为主
-
-- 后来一技巧性布局为主（这些技巧原本并不是用于布局的）
-
-- flexbox/grid
-
-- 响应式布局
-
-### 常见的布局方法
-
-1、**table 表格布局**：早期使用的布局，如今用得很少。
-
-2、**float 浮动 + margin**：问题较多。
-
-3、**inline-block 布局**：问题较多。
-
-对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
-
-4、**flex 布局**：为布局而生，非常灵活，是最为推荐的布局写法。唯一的缺点是兼容性问题：
-
-20191005_1200.png
-
-上图中可以看到， flex 布局不支持 IE9 及以下的版本。如果你的页面不需要处理 IE浏览器的兼容性问题，则可以放心大胆地使用 flex 布局。
-
 ### 常见的布局属性
 
 （1）`display` 确定元素的显示类型：
@@ -49,3 +23,51 @@
 
 `relative`、`absolute`、`fixed`这三个属性，可以结合 z-index 来设置层级。
 
+### 常见的布局方法
+
+1、**table 表格布局**：早期使用的布局，如今用得很少。
+
+2、**float 浮动 + margin**：问题较多。
+
+3、**inline-block 布局**：问题较多。
+
+对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
+
+4、**flex 布局**：为布局而生，非常灵活，是最为推荐的布局写法。
+
+唯一的缺点是兼容性问题：
+
+![](http://img.smyhvae.com/20191005_1200.png)
+
+上图中可以看到， flex 布局不支持 IE9 及以下的版本。如果你的页面不需要处理 IE浏览器的兼容性问题，则可以放心大胆地使用 flex 布局。
+
+flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。
+
+5、响应式布局。
+
+## float 属性
+
+> 是 CSS 中比较麻烦的一种属性。
+
+### float 属性的特点
+
+- 元素浮动
+
+- **脱离文档流，但不脱离文本流**
+
+代码举例：
+
+下面这两个并列的`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 本身是用来做图文混排、文字环绕的效果。
+
+
+