清除浮動的方法

Alex 發布于2019-08-29 12:54 / 2494人閱讀

摘要：前言本文主要介紹清除浮動的種風方法及利弊浮動對頁面的影響如果一個父級塊元素中的子元素浮動，那么所有浮動的子元素都脫離了文檔流，如果父元素無法確定高度，則其下面的兄弟元素會自動補位，造成視圖結構混亂，所以這個時候要進行清除浮動。

前言：

本文主要介紹清除浮動的4種風方法及利弊

浮動對頁面的影響：

如果一個父級塊元素中的子元素浮動，那么所有浮動的子元素都脫離了文檔流，如果父元素無法確定高度，則其下面的兄弟元素會自動補位，造成視圖結構混亂，所以這個時候要進行清除浮動。

關于清除浮動的方式:

方式一:使用overflow屬性來清除浮動

.parent{
    overflow:hidden;
}

　　　　先找到浮動盒子的父元素，再在父元素中添加一個屬性：overflow:hidden,就是清除這個父元素中的子元素浮動對頁面的影響.

　　　　注意：一般情況下也不會使用這種方式，因為overflow:hidden有一個特點，離開了這個元素所在的區域以后會被隱藏（overflow:hidden會將超出的部分隱藏起來）.

方式二:使用額外標簽法

.clear{
    clear:both;
}

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

　　　　　　a.內部標簽：會將這個浮動盒子的父盒子高度重新撐開.

　　　　　　b.外部標簽：會將這個浮動盒子的影響清除，但是不會撐開父盒子.

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

方法三:使用偽元素來清除浮動(after意思:后來,以后)

.clearfix:after{
    centent:"";//設置內容為空
    height:0;//高度為0
    line-height:0;//行高為0
    display:block;//將文本轉為塊級元素
    visibility:hidden;//將元素隱藏
    clear:both//清除浮動
}
.clearfix{
    zoom:1;為了兼容IE
}

方法四:使用雙偽元素清除浮動

.clearfix:before,.clearfix:after {

content: "";    
display: block;    
clear: both;

}

.clearfix {

zoom: 1;

}

總結

第一種方法會將超出部分隱藏在某些時候我們想清除浮動并且保留超出部分時做不到
第二種方法會增加許多不必要的標簽
推薦使用第三種方法來清除浮動
第四種是第三種的改良版，雖然比較簡便,但是不嚴謹!

云服務器 GPU云服務器的清除方法清除浮動 html浮動的影響緩存文件的清除

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112227.html

css浮動現象及清除浮動的方法

css浮動現象及清除浮動的方法 ? 首先先明確浮動最初的定義及使用場景：實現文本環繞圖片的效果。除了用浮動外，目前暫無其他方法實現文本環繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動的具體定義：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不...

Kyxy 2019-08-29 16:29 評論0 收藏0
css浮動現象及清除浮動的方法

css浮動現象及清除浮動的方法 ? 首先先明確浮動最初的定義及使用場景：實現文本環繞圖片的效果。除了用浮動外，目前暫無其他方法實現文本環繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動的具體定義：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不...

weakish 2019-08-02 11:19 評論0 收藏0
CSS清除浮動float的三種方法總結，為什么清浮動？浮動會有那些影響？

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

MAX_zuo 2019-08-28 18:28 評論0 收藏0
簡述清除浮動

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

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