1.脱流 让标签脱离标准流，不再按照标准流的方式进行布局。浮动和定位都可以让标签脱流。 所有的标签，只要脱离了标准流，布局的方式就只有一种：一行显示多个；默认大小是内容的大小；设置宽度有效
2.浮动 - float left - 左浮动 right - 右浮动 –>
如果块标签不浮动，占水面和池底的空间，并且还带着玻璃砖。 浮动的标签，只占水面的空间 –>
<head> <meta charset="utf-8"> <title></title> </head> <body> <!-- <h1>浮动原理：4中不同的浮动方案效果不一样</h1> <div style="background-color: hotpink; height: 200px; width: 500px; float: left;"></div> <div style="background-color: khaki; height: 250px; width: 600px; float: left;">div2</div> --> <!-- 练习 --> <div style="width: 50%; height: 200px; background-color: red; float: right;"></div> <div style="width: 60%; height: 300px; background-color: green;"></div> <div style="width: 30%; height: 100px; float: right; background-color: blue;"></div> </body>浮动的应用： 1.竖着显示的横着来（页面布局） 2.文字环绕: 被环绕的块浮动，文字块不浮动 –>
<head> <meta charset="utf-8"> <title></title> </head> <body> <div style="float: left;"> <img src="img/bucket.png" > </div> <div style="width: 220px;"> asdhfkajshdfk 阿斯蒂芬卡萨丁加法和 阿斯顿发数据库东方航空 阿萨德发客户萨科技发的 熬枯受淡房间卡是 <a href="">超链接1</a> <a href="">超链接1</a> <a href="">超链接1</a> <a href="">超链接1</a> <a href="">超链接1</a> <a href="">超链接1</a> <a href="">超链接1</a> <a href="">超链接1</a> <a href="">超链接1</a> <a href="">超链接1</a> <a href="">超链接1</a> <a href="">超链接1</a> <a href="">超链接1</a> <a href="">超链接1</a> </div> </body>清除浮动： 清除因为浮动而产生的高度塌陷的问题
1)高度塌陷: 父标签不浮动并且没有设置高度，子标签浮动就可能产生高度塌陷(没有设置高度的父标签会塌陷) 2)清除浮动： a.空盒子法：在高度会塌陷的标签的最后添加一个空的div，并且设置它的clear属性为both
b.设置overflow: 设置高度会塌陷的标签的overflow属性为hidden –> <head> <meta charset="utf-8"> <title></title> </head> <body> <div style="height: 120px; background-color: pink;"></div> <div class="subside" style="background-color: greenyellow;"> <div style="background-color: red; height: 100px; width: 100px;"> </div> <div style="background-color: saddlebrown; height: 400px; width: 35%; float: left;"></div> <div style="background-color: skyblue; height: 1300px; width: 40%; float: right;"></div> <!-- 1.空盒子法 --> <!-- <div style="clear: both;"></div> --> </div> <div style="height: 80px; background-color: seagreen;"></div> <!-- 2.设置overflow --> <style type="text/css"> .subside{ overflow: hidden; } </style> </body>