溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何清楚浮動（一）
已知一個大的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實現了。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
