感覺css里的float是個非常神奇的東西，神奇之處在於，你知道它是什么意思，但是用的時候總是不知道怎么實現效果。又或者它會很容易地影響到別的元素和屬性。所以今天打算嘗試一下float的各種設置，看看效果。在這篇博客里做個總結。
1. 設置float后對后面元素的影響
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ border:1px solid red; width:50px; height:50px; float: left; } .div2{ background: green; widows: 30px; height: 30px; } </style> </head> <body> <div class="div1">div1</div> <div class="div2">div2</div> </body> </html>
效果：
也就是說前面浮動元素會位於后續的非浮動元素的上方，確實是脫離了文檔流。這大概就是“浮動可以理解為讓某個div元素脫離標准流，漂浮在標准流之上，和標准流不是一個層次。”的意思吧。
而另一方面，如果把兩個元素調換次序，則效果為：
這時候div1是浮動元素，會被上面的元素頂下來。即使改變div2的寬度，也依然如此。
但是這時候如果把div2設置為position:absolute的話，div1就會浮動上去，說明position也是脫離標准流的，互不干涉。
而設置了position：absolute屬性的元素會覆蓋接下來的浮動元素。
2. float和position的相互影響
如果在float上設置position：absolute的話，會覆蓋float的屬性。就不是浮動了。float失效
在float上設置position：relative的話，如果設置left/top/right/bottom等屬性，則元素會先浮動到相應位置，然后再根據top/left/bottom/right所設置的距離發生偏移
在float上設置margin屬性也是有效的。
參考：