<menu id="u2y6m"></menu>
<tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 溫馨提示×

    css要怎么清除浮動

    發布時間:2021-10-17 08:25:36 來源:億速云 閱讀:99 作者:小新 欄目:web開發

    這篇文章給大家分享的是有關css要怎么清除浮動的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

    css清除浮動的方法:1、浮動代碼后添加一個設置了“clear:both”樣式的空div標簽。2、給父級元素添加一個設置“clear:both;”樣式的after偽元素。3、給父元素設置“overflow: auto”樣式。

    本教程操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

    在我們寫代碼的時候,有時因為使用了float浮動元素而導致頁面中某些元素不能正確的顯示。

    但使用float浮動元素后,會有一些不好的影響:

    (1)由于浮動元素脫離了文檔流,所以父元素的高度無法被撐開,影響了與父元素同級的元素
    (2)與浮動元素同級的非浮動元素會跟隨其后,因為浮動元素脫離文檔流不占據原來的位置
    (3)如果該浮動元素不是第一個浮動元素,則該元素之前的元素也需要浮動,否則容易影響頁面的結構顯示

    這個時候就需要清除浮動了,下面介紹一些css清除浮動的方法。

    (1)使用clear:both清除浮動

    在代碼中在放一個空的div標簽,然后給這個標簽設置clear:both來清除浮動對頁面的影響。它的優點是簡單,方便兼容性好,但是一般情況下不建議使用該方法,因為會造成結構混亂,不利于后期維護

    <div style="clear: both"></div>

    (2)利用偽元素clearfix來清除浮動

    給父級元素添加了一個:after偽元素,通過清除偽元素的浮動,達到撐起父元素高度的目的

    .clearfix:after{
        content:"";
        display:block;
        visibility:hidden;
        clear:both;
        }

    (3)使用CSS的overflow屬性

    當給父元素設置了overflow樣式,不管是overflow:hidden或overflow:auto都可以清除浮動只要它的值不為visible就可以了,它的本質就是建構了一個BFC,這樣使得達到撐起父元素高度的效果

    .box{
    border:1px solid #ccc;
    background:#eff2f4;
    overflow: auto
    }

    感謝各位的閱讀!關于“css要怎么清除浮動”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    css
    免費撥打  400 100 2938 免費撥打 400 100 2938
    24小時售后技術支持 24小時售后技術支持
    返回頂部 返回頂部
    <menu id="u2y6m"></menu>
    <tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 一本久道久久综合丁香五月_免费视频禁止18以下禁止观看_日本japanese熟睡人妻_成熟闷骚女邻居引诱2