• <source id="34mr4"><object id="34mr4"></object></source>
    
    <center id="34mr4"><optgroup id="34mr4"></optgroup></center>
  • <label id="34mr4"><xmp id="34mr4">
    ?
    您好,歡迎訪問唐山現代電腦培訓學校官網!

    186 3153 9995

    全國咨詢熱線

    您現在所在位置: 主頁 > 行業動態 > UI設計

    前端開發培訓中CSS清除浮動的方法有哪些

    更新時間:2023-03-14

    01.jpg

        常用的CSS清除浮動的方法為使用clear屬性清除浮動:使用空標記清除浮動、使用overflow屬性清除浮動、使用after偽元素清除浮動。如果想具體了解前端開發CSS清除浮動的方法,那不妨接著往下看吧!

        前端開發CSS清除浮動的方法

        在前端開發過程中,非IE瀏覽器下,當容器的高度自動,并且容器內容中有浮動元素(float為left或right),此時如果容器的高度不能自適應內容的高度,從而使得內容溢出破壞整體布局,這種現象叫做浮動溢出。

        為了方式這個現象的發生,就需要對CSS樣式進行處理,而這個過程就叫做CSS清除浮動。

        一般使用clear屬性清除浮動。但是要注意的是clear屬性只能清除標記左右兩側浮動的影響,然而在網頁開發時,經常會受到一些特殊的浮動影響,例如,對子標記設置浮動時,如果不對其父標記定義高度,則子標記的浮動會對父標記產生影響。使用clear屬性并不能消除子標記浮動對父標記的影響。

        1)使用空標記清除浮動

        在浮動標記之后添加空標記,并對該標記應用“clear:both”樣式,可清除標記浮動所產生的影響,這個空標記可以是“div”。

        2)使用overflow屬性清除浮動

        對標記應用overflow:hidden”樣式,也可以清除浮動對該標記的影響。這種方式彌補了空標記清除浮動的不足。

        需要注意的是,在使用“overflow:hidden”樣式清除浮動時,一定要將該樣式寫在被影響的標記中。

        3)使用after偽元素清除浮動

        使用after偽元素也可以清除浮動,但是該方法只適用于IE8及以上版本瀏覽器和其他非IE瀏覽器。使用after偽元素清除浮動時需要注意以下兩點:

        ①必須為需要清除浮動的標記偽元素設置“height:0;”樣式,否則該標記會比其實際高度高出若干像素。

        ②必須在偽元素中設置content屬性,屬性值可以為空,如“content:””;”。

        前端技術相對后臺編程更容易入門,而前端開發工程師職業發展以及就業薪資非常穩定。如果想要系統學習Web前端開發技能。可以直接通過碼上未來官網了解在線學習前端+移動開發的課程。

    推薦課程

    在線客服

    ONLINE SERVICE

    聯系電話

    186 3153 9995

    返回頂部
    主站蜘蛛池模板: 激情综合丝袜美女一区二区| 亚洲人成伊人成综合网久久| 精品国产第一国产综合精品| 久久伊人久久亚洲综合| 亚洲国产精品成人综合久久久| 东京热TOKYO综合久久精品| 伊人色综合久久天天人手人婷| 色综合久久中文字幕无码| 伊人色综合一区二区三区影院视频| 国产尹人香蕉综合在线电影| 久久综合九色综合精品| 国产综合精品一区二区| 久久综合丝袜长腿丝袜| 伊人久久青草青青综合| 人人狠狠综合久久亚洲高清| 婷婷五月综合色视频| 国产成人综合精品一区| 亚洲a无码综合a国产av中文| 亚洲婷婷天堂在线综合| 伊人久久青草青青综合| 综合人妻久久一区二区精品 | 亚洲另类激情综合偷自拍| 国产亚洲精品第一综合| 狠狠色成人综合网图片区| 久久婷婷五月综合色高清| 久久综合综合久久狠狠狠97色88 | 亚洲五月综合网色九月色| 狠狠色噜噜狠狠狠狠色综合久AV| 国产香蕉久久精品综合网| 麻豆久久婷婷综合五月国产| 久久精品水蜜桃av综合天堂| 亚洲综合婷婷久久| 亚洲国产成人综合| 婷婷五月综合丁香在线| 91在线亚洲综合在线| 亚洲七久久之综合七久久| 亚洲综合色婷婷在线观看| 色偷偷91综合久久噜噜| 热久久综合这里只有精品电影 | 伊人久久大香线蕉综合影院首页| 亚洲色偷偷偷鲁综合|