總結(jié)：清除浮動的方法

harryhappy 發(fā)布于2019-08-30 11:17 / 1310人閱讀

摘要：因?yàn)檫@種清除浮動的方式會增加頁面的標(biāo)簽，造成結(jié)構(gòu)的混亂方法二父級定義原理使用屬性來清除浮動有一點(diǎn)需要注意，屬性共有三個(gè)屬性值。

方法一、在結(jié)尾處添加空div標(biāo)簽clear:both

在浮動的盒子之下再放一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽中使用clear:both，來清除浮動對頁面的影響.

注意：一般情況下不會使用這一種方式來清除浮動。因?yàn)檫@種清除浮動的方式會增加頁面的標(biāo)簽，造成結(jié)構(gòu)的混亂.


    1
    2
    3

方法二、父級div定義 overflow: auto

原理：使用overflow屬性來清除浮動有一點(diǎn)需要注意，overflow屬性共有三個(gè)屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值


    1
    2
    3

方法三、使用偽元素來清除浮動(:after,注意：作用于浮動元素的父親）

（注：主要推薦該方法）

.clearfix:after{
    content:"";/*設(shè)置內(nèi)容為空*/
    clear:both;/*清除浮動*/
     display:block;/*將文本轉(zhuǎn)為塊級元素*/
    height:0;/*高度為0*/
    visibility:hidden;/*將元素隱藏*/
}
.clearfix{
    zoom:1;/*為了兼容IE*/
}

end~~~
如有更好方法，歡迎大家留言討論，謝謝

GPU云服務(wù)器云服務(wù)器的清除方法清除浮動方法總結(jié) 使用方法總結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114891.html

相關(guān)文章

CSS清除浮動float的三種方法總結(jié)，為什么清浮動？浮動會有那些影響？

摘要：方法三據(jù)說是最高大上的方法方法注意作用于浮動元素的父親先說原理這種方法清除浮動是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動，他就是利用和來在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動的效果。的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實(shí)現(xiàn)清楚浮動。一、拋一塊問題磚（display： block）先看現(xiàn)象： showImg(https://segmentfault.com/img/bVrWvS)...

MAX_zuo 2019-08-28 18:28 評論0 收藏0
總結(jié)：清除浮動的方法

摘要：因?yàn)檫@種清除浮動的方式會增加頁面的標(biāo)簽，造成結(jié)構(gòu)的混亂方法二父級定義原理使用屬性來清除浮動有一點(diǎn)需要注意，屬性共有三個(gè)屬性值。方法一、在結(jié)尾處添加空div標(biāo)簽clear:both 在浮動的盒子之下再放一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽中使用clear:both，來清除浮動對頁面的影響. 注意：一般情況下不會使用這一種方式來清除浮動。因?yàn)檫@種清除浮動的方式會增加頁面的標(biāo)簽，造成結(jié)構(gòu)的混亂. ...

ssshooter 2019-08-02 15:26 評論0 收藏0
清除浮動方式總結(jié)

摘要：為什么要清除浮動雖說是清除浮動，其實(shí)是清除浮動產(chǎn)生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們布局中需要清除浮動的最重要的原因之一。清除浮動的方法父級定義原理父級手動定義，就解決了父級無法自動獲取到高度的問題。為什么要清除浮動？雖說是清除浮動，其實(shí)是清除浮動產(chǎn)生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們布局中需要清除浮動的最重要的原因之一。清除浮動的方法：父級di...

laoLiueizo 2019-08-30 12:49 評論0 收藏0
Css清除浮動的方法總結(jié)

摘要：網(wǎng)頁布局中經(jīng)常會用到浮動，但是浮動的塊級元素脫離了標(biāo)準(zhǔn)文檔流，使得浮動元素的父元素沒有高度，導(dǎo)致父級元素沒有高度，所以需要清除浮動對父級元素的影響，本文介紹清除浮動的幾種方法。網(wǎng)頁布局中經(jīng)常會用到float浮動，但是浮動的塊級元素脫離了標(biāo)準(zhǔn)文檔流，使得浮動元素的父元素沒有高度，導(dǎo)致父級元素沒有高度，所以需要清除浮動對父級元素的影響，本文介紹清除浮動的幾種方法。清除浮動影響的幾種方法...

LeanCloud 2019-08-30 11:20 評論0 收藏0
簡述清除浮動

摘要：為什么要清除浮動影響其他元素定位父盒子高度為，子盒子全部浮動定位，子盒子不會撐開父盒子，下面的元素會到子盒子的下面。清除浮動方法總結(jié)對父級元素設(shè)置高度對父級設(shè)置適合高度樣式清除浮動，一般設(shè)置高度需要能確定內(nèi)容高度才能設(shè)置高度設(shè)置為內(nèi)容高度。為什么要清除浮動？ 1、影響其他元素定位父盒子高度為0，子盒子全部浮動、定位，子盒子不會撐開父盒子，下面的元素會到子盒子的下面。 2.背景圖片或顏...

FuisonDesign 2019-08-29 12:35 評論0 收藏0