div+css浮動的解決方法-css教學-PHP中文網

首頁

web前端

css教學

div+css浮動的解決方法

高洛峰

Mar 31, 2017 am 11:15 AM

css浮動

如何清楚浮动（一）

　　已知一个大的div容器，这个容器包含了两个子div容器，然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器)，清楚浮动的div容器设置css样式为clear:both，此时，大的div标签的内部(左右两边/*css5*/)浮动就清除了。

　　如果有一个大的div容器

，这个大的div包含了一个子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實現了。

以上是div+css浮動的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn