清除浮動的方法

rottengeek 發布于2019-08-30 15:53 / 1622人閱讀

摘要：清除浮動本質解決父級元素因為子級浮動引起內部高度為的問題。清除浮動的方法選擇器額外標簽法推薦的做法是通過在浮動元素末尾添加一個空的標簽例如，或則其他標簽等亦可。

清除浮動本質：解決父級元素因為子級浮動引起內部高度為0 的問題。

         清除浮動就是把浮動的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。

清除浮動的方法：

        選擇器`{clear:left | right | both;}`

1 額外標簽法：
W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如

，或則其他標簽br等亦可。
優點：代碼簡潔
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。
2 父級添加overflow屬性方法
可以通過觸發BFC的方式，可以實現清除浮動效果。
可以給父級添加： overflow為 hidden|auto|scroll 都可以實現。
優點：代碼簡潔
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。
3 使用after偽元素清除浮動

 .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   
 .clearfix {*zoom: 1;}   ie6、7 專有

優點：符合閉合浮動思想結構語義化正確
缺點：由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
代表網站：百度、淘寶網、網易等
4 after偽元素空余字符法
content:"200B";這個參數，Unicode字符里有一個“零寬度空格”，即 U+200B，代替原來的“.”，可以縮減代碼量。而且不再使用visibility:hidden。

.clearfix:after {content:"200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }.

當然有些網站也用 content:"0200" 的，都是空格的意思。
代表網站：阿里巴巴等
5 使用before和after雙偽元素清除浮動

.clearfix:before,.clearfix:after{ 
           content:".";
           display:table;
   }
.clearfix:after{
 clear:both;
}
.clearfix{*zoom:1;}

優點：代碼更簡潔
缺點：由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
代表網站：小米、騰訊等

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

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

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

清除浮動的方法

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

Alex 2019-08-29 12:54 評論0 收藏0
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