清除CSS浮動(dòng)影響的方法

在CSS中，浮動(dòng)是一種常用的布局方式，但有時(shí)候浮動(dòng)元素會(huì)對(duì)其他元素產(chǎn)生影響，這時(shí)就需要清除浮動(dòng)影響，下面介紹幾種清除CSS浮動(dòng)影響的方法。

1、使用clear屬性

CSS的clear屬性可以清除浮動(dòng)影響，該屬性指定了元素兩側(cè)都不能有浮動(dòng)元素，或者指定了元素只能與浮動(dòng)元素出現(xiàn)在同一側(cè)，如果想要讓一個(gè)元素出現(xiàn)在兩個(gè)浮動(dòng)元素的下方，可以使用clear:both來(lái)清除兩個(gè)方向的浮動(dòng)影響。

2、使用偽元素

使用偽元素也可以清除浮動(dòng)影響，在元素內(nèi)部使用:after偽元素，并設(shè)置其content屬性為""，可以創(chuàng)建一個(gè)空的塊級(jí)元素，該元素可以清除浮動(dòng)影響，在元素內(nèi)部使用div:after {content:""; display:block; clear:both;}可以清除兩個(gè)方向的浮動(dòng)影響。

3、使用父元素

浮動(dòng)影響不僅僅是對(duì)其他元素產(chǎn)生影響，還會(huì)對(duì)父元素產(chǎn)生影響，這時(shí)，可以通過(guò)設(shè)置父元素的height屬性為100%或者auto來(lái)清除浮動(dòng)影響，在父元素內(nèi)部使用div {height:100%;}可以清除浮動(dòng)影響。

4、使用BFC（塊級(jí)格式化上下文）

BFC是一種CSS布局方式，可以創(chuàng)建一個(gè)新的布局上下文，使得其中的元素不受外部浮動(dòng)影響，可以通過(guò)設(shè)置元素的position屬性為relative或者absolute來(lái)創(chuàng)建一個(gè)BFC，或者使用display屬性值為flow-root、table-cell、table-row、table-header-group、table-footer-group等元素來(lái)創(chuàng)建一個(gè)BFC。

清除CSS浮動(dòng)影響的方法有很多種，具體使用哪種方法取決于實(shí)際情況。