css清除浮動的幾種方法_web前端入門到實戰：總結清除浮動的方法

方法一、在結尾處添加空div标簽clear:both

在浮動的盒子之下再放一個标簽，在這個标簽中使用clear:both，來清除浮動對頁面的影響.

注意：一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的标簽，造成結構的混亂.

<div class="box">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
    <div class="clear"></div>
</div>
           

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

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

<div class="box over-flow">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
</div>
           

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

（注：主要推薦該方法）

.clearfix:after{
    content:"";/*設定内容為空*/
    clear:both;/*清除浮動*/
     display:block;/*将文本轉為塊級元素*/
    height:0;/*高度為0*/
    visibility:hidden;/*将元素隐藏*/
}
.clearfix{
    zoom:1;/*為了相容IE*/
}
           

end~~~

在學習上有什麼疑問随時可以找我我，與大家分享網際網路web前端實戰操作，無論你是否有基礎，我都歡迎

。點：前端技術分享