文档流：
文档中可显示对象在排列时所占用的位置。自上而下，自左到右的排列。
特性：
浮动的元素会脱离文档流
好处：
块级元素可以排列在同一行，能节省空间。
浮动之后：
原本被浏览器解析的空格消失了----空格也相当于文本，效果同文字环绕，所以空格在最后面父元素塌陷----脱离文档流之后，无法撑开父元素使元素块级化
浮动的值（两个）：
float:left;float:right;
浮动的最初目的——文字环绕：
（1）不浮动
<head><style>#n1{width:300px;height:300px;border:1px solid orange;}#n1 div{width:80px;height:80px;background-color: pink;}</style></head><body><div id="n1"><div></div>在九月 潮湿的车厢你看着车窗窗外它 水管在开花椅子在异乡树叶有翅膀上海的街道雪山在边上你靠着车窗我心脏一旁我们去哪你看那 九点钟方向日内瓦湖的房子贵吗世界上 七千个地方我们定居哪知道嘛 今天的消息说一号公路上那座桥断了我们还去吗要不再说呢会修一年吧一年能等吗你还去吗你喜欢吗</div></body>
网页显示：
（2）浮动
<head><style>#n1{width:300px;height:300px;border:1px solid orange;}#n1 div{float:left;width:80px;height:80px;background-color: pink;}</style></head><body><div id="n1"><div></div>在九月 潮湿的车厢你看着车窗窗外它 水管在开花椅子在异乡树叶有翅膀上海的街道雪山在边上你靠着车窗我心脏一旁我们去哪你看那 九点钟方向日内瓦湖的房子贵吗世界上 七千个地方我们定居哪知道嘛 今天的消息说一号公路上那座桥断了我们还去吗要不再说呢会修一年吧一年能等吗你还去吗你喜欢吗</div></body>
网页显示：
左浮动：
<head><style>*{margin:0;padding:0;}#n1{width:200px;height:200px;border:1px solid orange;}#n1 div{float:left;}</style></head><body><div id="n1"><div style="width: 50px;height: 150px; background-color: pink;">1</div><div style="width: 50px;height: 130px; background-color: pink;">2</div><div style="width: 50px;height: 110px; background-color: pink;">3</div><div style="width: 50px;height: 90px; background-color: pink;">4</div></div></body>
网页显示：
右浮动：
<head><style>*{margin:0;padding:0;}#n1{width:200px;height:200px;border:1px solid orange;}#n1 div{float:right;}</style></head><body><div id="n1"><div style="width: 50px;height: 150px; background-color: pink;">1</div><div style="width: 50px;height: 130px; background-color: pink;">2</div><div style="width: 50px;height: 110px; background-color: pink;">3</div><div style="width: 50px;height: 90px; background-color: pink;">4</div></div></body>
网页显示：
补充1：
<head><style>*{margin:0;padding:0;}#n1{width:200px;height:200px;border:1px solid orange;}#n1 div{float:left;}</style></head><body><div id="n1"><div style="width: 50px;height: 150px; background-color: pink;">1</div><div style="width: 50px;height: 130px; background-color: pink;">2</div><div style="width: 50px;height: 110px; background-color: pink;">3</div><div style="width: 50px;height: 90px; background-color: pink;">4</div><div style="width: 50px;height: 90px; background-color: purple;">5</div></div></body>
网页显示：
结果解释：
5会被3卡住。
补充2：
<head><style>*{margin:0;padding:0;}#n1{width:200px;height:200px;border:1px solid orange;}#n1 div{float:left;}</style></head><body><div id="n1"><div style="width: 50px;height: 150px; background-color: pink;">1</div><div style="width: 50px;height: 130px; background-color: pink;">2</div><div style="width: 50px;height: 110px; background-color: pink;">3</div><div style="width: 50px;height: 90px; background-color: pink;">4</div><div style="width: 50px;height: 90px; background-color: purple;">5</div><div style="width: 50px;height: 90px; background-color: purple;">6</div></div></body>
网页显示：
结果解释：
6被5的高度卡住。其实和上面同理。
父容器塌陷解决（清除浮动）：
1、父容器也浮动----包裹2、给父容器加一个溢出隐藏overflow:hidden;----包裹（被隐藏的东西就不会影响外界，起屏蔽作用，变成一个独立的空间，但里面超出去的字会看不到）3、清除浮动----浮动依然存在，但让浏览器保留原来文档流的排列
上面两种方法看情况，不推荐。以后子元素有浮动，给父元素加clearfix，不让父元素塌掉。
第三种清除浮动的其中两种方法：
一般都会要清除，清除的目的就是为了不让父元素塌掉，不塌就行。
（1）添加一个元素（不需要在页面上展示）：
<head><style>.clearfix:clear:both;<!--clearfix:clear:left;.clearfix:clear:right;-->.</style></head><body><div class="clearfix"><div></body>
（2）伪元素：（通常使用这种方法）
#fu::after{content:"";display:block;clear:both;}
