已知一個大的div容器，這個容器包含了兩個子div容器，然後在這兩個子div容器的後面再添加一個div(這個div表示清除浮動的div容器)，清楚浮動的div容器設定css樣式為clear:both，此時，大的div標籤的內部(左右兩邊/*css5*/)浮動就清除了。
如果有一個大的div容器<div class="divcss5"> </div> ，這個大的div包含了一個子div容器<div class="clear"></div>，子div容器設定一個寬度、高度、背景色，不設定內、外邊距以及浮動，此時子div容器預設居左，這時子div居左是浮動(float)繼承瀏覽器的屬性，不具有布局的作用。然後我們設定這個子div容器的浮動，讓它居左float:left；我發現設定了浮動居左float:left，子div容器產生了浮動，子div容器離大div容器頂部有一定距離。
<body> <div class="divcss5"> <div class="clear"></div> <!--<div class="clear eft"></div> <div class="clear ight"></div>--> </div> </body>
浮動有margin屬性
然後我margin-top:10px, 子div容器在原有的基礎上向下移動了10px的距離，也就是說，浮動不會影響margin-top屬性應有的位移量，同理也不會影響margin-left、margin-right、margin-bottom屬性應有的位移量。
浮動沒有top，left，right，bottom屬性
然後，現在我刪掉margin-top:10px;，給子div容器設定top:10px，發現縱座標並沒有發生位移，也就是是說浮動並沒有top屬性。同理也就沒有left、right、bottom屬性。
那麼，在什麼情況下設定top、left、right、bottom的屬性才能對浮動起作用呢？
浮動有top，left，right，bottom屬性(條件設定相對位置position)
於是，我給子div容器加了相對位置position:relative，接著設定top:10px，突然發現子div容器向下位移了10px。
繼續在子div浮動的狀態，給它設定position:relative;，接著給它設定margin-left:10px;，看到子div容器的位置水平向右發生了10px的位移量，同理margin-top、margin-right、margin-bottom都會改變。
也就是說，當給子div容器設定浮動float:left，接著設定margin-left會起作用，設定top是沒有作用。只有給子div容器設定相對位置position的時候，top才能在浮動的狀態下起作用，那麼是不是說left，top是在相對位置的時候，才能起作用呢？那麼現在我們就做一個實驗，我在子div容器裡把float:left;position:relative;都刪掉，不會有浮動，也不會有相對位置，然後寫上top:10px;left:10px;相應的css代碼如下.clear{width: 200px;background: #f2e;color:#030617;height: 20px;top:50px;left:10px;};，結果是子div容器根本沒有在橫、縱軸移動過位置，所以事實證明left、top是在設定了相對位置position的時候才起作用。margin就是不管你設定position與不設定position都會起作用。
繼續上面的float浮動，如果現在給float設定inherit;繼承瀏覽器的浮動屬性，此時我們看子div是不浮動的，預設居左。同樣的給子div設定浮動樣式 none initial也不會有浮動作用。只有給子div容器設定了left和right的浮動，子div容器才會出現浮動狀態。
如何清楚浮動（二）
下面，我們用一種其他的方法來清除浮動，HTML代碼還是以上的代碼，大容器的div的css代碼：.divcss5{padding:10px 0;width: 100%; left: 50%;right: 50%;background: #007CB5;}，子div容器的css代碼：.clear{width: 200px;background: #f2e;color:#030617;height: 20px;float:left;}，此時看到的是浮動的效果，子div容器浮在大容器上面，同樣的原理，我還是用清除浮動clear:both；我們可以用css虛擬元素:after，下面就是一個很簡單的css代碼，給父容器寫css偽類，代碼：.divcss5:after{content: "1";clear: both;display: block;}，此時，我們看到的是，清除了大容器的浮動，並且在瀏覽器上能看到子div容器被包含在了大div容器內部。在瀏覽器上查看元素，可以看到after包含在了父容器內，所以，after相當於在給父容器內部加一個清楚浮動的div，只是少了一個div層，這個層被.divcss5:after實現了。
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
