CSS中定位的浮动float
浮动到底是怎么样的？
W3CSCHOOL对浮动属性的解释：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。所以浮动也有left、right、none三种。
我个人的理解是：HTML 文件就像是一个方形的水槽，它在浏览器中加载的过程就好比是向水槽中放水，而这些水就代表的是页面中的各个元素，他们都是有顺序的进入水槽（文档流的顺序 和我们写字一样，从上到下从左到右）。当出现了一个具有浮动属性（float）的元素时，就好像是水流中多了一块泡沫，它会浮在水面上（也就是说明元素脱 离了文档流）。在水流停止后（页面加载完毕），这个元素会停靠在水槽的边缘或者停靠在别的泡沫边缘（浮动元素会处于包含框的边缘或者另一个浮动元素的边 缘）。
对于浮动元素是否脱离了文档流，这个我刚开始也很迷糊，因为在看教学视频的时候一个老师说没有，另一个老师说有。于是就自己敲了代码做了点实验：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #div1 { height: 180px; width: 100px; 没有设置则根据内容自动计算宽度 background-color: #e13b00; float: left; clear: both; } </style> <body> <div id="div1"> div1div1d </div> <p style="background-color:green"> 1234567890 </p> <p style="background-color:blue"> 1234567890 </p> <div style="background-color:#888"> AAAAAA </div> <p style="background-color:#888"> 1234567890 </p> <p style="width:50px;background-color:#777"> 1234567890 </p> </body> </html>
说明：
1、浮动块靠左，后面的内容自动排在后边，视角看不重叠，浮动块占居了空间，好像没有脱离文档流，但是将浮动块的背景去掉，显示结果表明<p>元素显示空间和浮动块还是重叠的，说明浮动块脱离了文档流，但是<p>元素内容显示位置会自动移动；
2、浮动块的说明对后续的元素定位产生了影响；
3、最后一个<p>元素设置了宽度，自动排在了浮动块的下面，如果不设置宽度会排在浮动块的右边。什么原因？ ， 浮动块对整个元素的定位影响好像说明浮动块没有脱离文档流。
设置的浮动的元素其实是脱离的文档流的，但是这个元素的内容还是会在视觉上占据空间，不会覆盖其他元素或者被其他元素覆盖？
浮动的元素对其他元素的影响有什么？
浮动元素对其他元素的影响就如同上面的例子显示的，浮动的元素会根据自己内容的大小把他之后的元素的内容挤到后面 。
浮动的元素到底会影响多大范围是根据浮动的元素它的内容的大小决定的。(上面的例子，<p>设置了宽度也影响到定位）
清除浮动带来的影响主要是通过两种方式：
第一种：给不想受到影响的元素增加属性clear：both/right/left. 这个属性的意思并不是清除什么，而是应该理解为拥有这个属性的元素左边或者右边不允许存在浮动元素的内容。
例如我们给第一个p标签增加了clear:left;这样一个属性，那么它就会从DIV块下面开始出现，同时会把第二个p标签也带下来（因为他们是按照顺序显示的）。而我们给第二个p标签增加clear:left，第一个p标签还是受到浮动的影响的。
第二种：给不想受到影响的元素增加属性width：100%；overflow:hidden; 这个方法也是有效的。
浮动主要用来干什么？
其实浮动的作用还是很重要的，我们可以利用它实现很常见的两列或者多列的网页布局，下面举个例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> *{margin: 0px;padding: 0px} #div{ width: 90%; margin: auto; } #header{ height: 90px; background-color: darkslategrey; } #main{ height: 300px; padding: 2%; background-color: #bfbfbf; } #left{ float: left; width: 20%; height: 300px; background-color: #0044aa; } #right{ float: right; width: 75%; height: 300px; background-color: yellow; } #footer{ height: 70px; background-color: rosybrown; } </style> <body> <div id="div"> <div id="header"> </div> <div id="main"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"> </div> </div> </body> </html>
