我們在給標籤設定浮動後，會有一下幾個特點
1 浮動會脫離標準流
如果一個元素按照正常的標準流來顯示，會在html中所屬的位置上佔位，後面的元素會緊跟著它，但是浮動脫離了標準流，以後我們在看到浮動的元素之後，不能以正常的標準流裡進行判斷
2 浮動的元素會影響下面的元素，不會影響上面的元素
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .one { width: 100px; height: 100px; background: red; } .two { width: 100px; height: 100px; background: green; float: left; } .three { width: 150px; height: 150px; background: blue; } </style></head><body><div class="one"></div><div class="two"></div><div class="three"></div></body></html>
3 浮動會影響元素的顯示方式
不管元素是行內元素還是區塊層級元素，設定浮動後，將來顯示的時候會在同一行內顯示，除非一行放不下了，才會在第二行依次顯示
浮動後的元素是可以設定寬高
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .one { width: 100px; height: 100px; background: red; float: left; } .two { width: 100px; height: 100px; background: green; float: left; } </style></head><body><!--我們知道行內元素設定寬高是不起作用的，但是給行內元素設定浮動後，寬高就可以設定了--><span class="one"></span><span class="two"></span></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
