溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
如何清楚浮動(dòng)（一）
已知一個(gè)大的div容器，這個(gè)容器包含了兩個(gè)子div容器，然后在這兩個(gè)子div容器的后面再添加一個(gè)div(這個(gè)div表示清除浮動(dòng)的div容器)，清楚浮動(dòng)的div容器設(shè)置css樣式為clear:both，此時(shí)，大的div標(biāo)簽的內(nèi)部(左右兩邊/*css5*/)浮動(dòng)就清除了。
如果有一個(gè)大的div容器<div class="divcss5"> </div> ，這個(gè)大的div包含了一個(gè)子div容器<div class="clear"></div>，子div容器設(shè)置一個(gè)寬度、高度、背景色，不設(shè)置內(nèi)、外邊距以及浮動(dòng)，此時(shí)子div容器默認(rèn)居左，這時(shí)子div居左是浮動(dòng)(float)繼承瀏覽器的屬性，不具有布局的作用。然后我們?cè)O(shè)置這個(gè)子div容器的浮動(dòng)，讓它居左float:left；我發(fā)現(xiàn)設(shè)置了浮動(dòng)居左float:left，子div容器產(chǎn)生了浮動(dòng)，子div容器離大div容器頂部有一定距離。
<body> <div class="divcss5"> <div class="clear"></div> <!--<div class="clear eft"></div> <div class="clear ight"></div>--> </div> </body>
浮動(dòng)有margin屬性
然后我margin-top:10px, 子div容器在原有的基礎(chǔ)上向下移動(dòng)了10px的距離，也就是說，浮動(dòng)不會(huì)影響margin-top屬性應(yīng)有的偏移量，同理也不會(huì)影響margin-left、margin-right、margin-bottom屬性應(yīng)有的偏移量。
浮動(dòng)沒有top，left，right，bottom屬性
然后，現(xiàn)在我刪掉margin-top:10px;，給子div容器設(shè)置top:10px，發(fā)現(xiàn)縱坐標(biāo)并沒有發(fā)生偏移，也就是是說浮動(dòng)并沒有top屬性。同理也就沒有l(wèi)eft、right、bottom屬性。
那么，在什么情況下設(shè)置top、left、right、bottom的屬性才能對(duì)浮動(dòng)起作用呢？
浮動(dòng)有top，left，right，bottom屬性(條件設(shè)置相對(duì)位置position)
于是，我給子div容器加了相對(duì)位置position:relative，接著設(shè)置top:10px，突然發(fā)現(xiàn)子div容器向下偏移了10px。
繼續(xù)在子div浮動(dòng)的狀態(tài)，給它設(shè)置position:relative;，接著給它設(shè)置margin-left:10px;，看到子div容器的位置水平向右發(fā)生了10px的偏移量，同理margin-top、margin-right、margin-bottom都會(huì)改變。
也就是說，當(dāng)給子div容器設(shè)置浮動(dòng)float:left，接著設(shè)置margin-left會(huì)起作用，設(shè)置top是沒有作用。只有給子div容器設(shè)置相對(duì)位置position的時(shí)候，top才能在浮動(dòng)的狀態(tài)下起作用，那么是不是說left，top是在相對(duì)位置的時(shí)候，才能起作用呢？那么現(xiàn)在我們就做一個(gè)實(shí)驗(yàn)，我在子div容器里把float:left;position:relative;都刪掉，不會(huì)有浮動(dòng)，也不會(huì)有相對(duì)位置，然后寫上top:10px;left:10px;相應(yīng)的css代碼如下.clear{width: 200px;background: #f2e;color:#030617;height: 20px;top:50px;left:10px;};，結(jié)果是子div容器根本沒有在橫、縱軸移動(dòng)過位置，所以事實(shí)證明left、top是在設(shè)置了相對(duì)位置position的時(shí)候才起作用。margin就是不管你設(shè)置position與不設(shè)置position都會(huì)起作用。
繼續(xù)上面的float浮動(dòng)，如果現(xiàn)在給float設(shè)置inherit;繼承瀏覽器的浮動(dòng)屬性，此時(shí)我們看子div是不浮動(dòng)的，默認(rèn)居左。同樣的給子div設(shè)置浮動(dòng)樣式 none initial也不會(huì)有浮動(dòng)作用。只有給子div容器設(shè)置了left和right的浮動(dòng)，子div容器才會(huì)出現(xiàn)浮動(dòng)狀態(tài)。
如何清楚浮動(dòng)（二）
下面，我們用一種其他的方法來清除浮動(dòng)，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;}，此時(shí)看到的是浮動(dòng)的效果，子div容器浮在大容器上面，同樣的原理，我還是用清除浮動(dòng)clear:both；我們可以用css偽元素:after，下面就是一個(gè)很簡(jiǎn)單的css代碼，給父容器寫css偽類，代碼：.divcss5:after{content: "1";clear: both;display: block;}，此時(shí)，我們看到的是，清除了大容器的浮動(dòng)，并且在瀏覽器上能看到子div容器被包含在了大div容器內(nèi)部。在瀏覽器上查看元素，可以看到after包含在了父容器內(nèi)，所以，after相當(dāng)于在給父容器內(nèi)部加一個(gè)清楚浮動(dòng)的div，只是少了一個(gè)div層，這個(gè)層被.divcss5:after實(shí)現(xiàn)了。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
