您好,登錄后才能下訂單哦!
本篇文章和大家了解一下css清除浮動(dòng)的代碼演示。有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)大家有所幫助。
首先我們要知道clear:both是清除浮動(dòng)的關(guān)鍵。
clear是CSS中的定位屬性,規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。那么clear:both就是規(guī)定在左右兩側(cè)均不允許浮動(dòng)元素。
clear屬性只能在塊級(jí)元素上其作用,這就是清除浮動(dòng)樣式中display:block的作用。
另外visibility: hidden;height: 0;只要content的值為空,寫不寫都無所謂。
那么為什么要清除浮動(dòng),最常見的是因?yàn)橥鈱尤萜鞲叨忍?,代碼演示:
<style> .wrap { width: 200px; border: 1px solid #333; } .wrap:after { content: ''; display: block; clear: both; } .left { float: left; background: blue; height: 100px; width: 100px; } .right { float: left; background: red; height: 50px; width: 100px; } </style> <body> <div class='wrap'> <div class="left"></div> <div class="right"></div> </div> </body>
為了顯示清楚一點(diǎn),在.wrap:after 樣式中的content設(shè)置為content: 'after偽元素' ,此時(shí)如下圖所示。
隨后在.wrap:after 樣式中加上clear:both,表明after偽元素左右兩側(cè)均不允許浮動(dòng)元素,沒辦法只好把a(bǔ)fter偽元素放在下面,此時(shí)如下圖所示。
順帶撐起了.wrap父元素的高度,這樣就相當(dāng)清除了浮動(dòng)了,解決了外層容器高度坍塌的問題。
那么我們把.wrap:after 樣式中的content設(shè)置為content:' ',最后就如下圖所示。
以上就是css清除浮動(dòng)的代碼演示的簡略介紹,當(dāng)然詳細(xì)使用上面的不同還得要大家自己使用過才領(lǐng)會(huì)。如果想了解更多,歡迎關(guān)注億速云行業(yè)資訊頻道哦!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。