清除浮動的可用方式

wizChen 發布于2019-08-29 11:18 / 2750人閱讀

摘要：清除浮動的可用方式測試瀏覽器正常格式的代碼顯示如下圖片描述但是對和應用后浮動的影響顯而易見使元素從正常的文檔流中刪除，但是依舊會占據空間。

清除浮動的可用方式 （測試瀏覽器：FF）

div0

div1

div2

this is a paragraph

顯示如下：
圖片描述

但是對class1和class2應用float:left后：

浮動的影響顯而易見

float:left/right/none; 使元素從正常的文檔流中刪除，但是依舊會占據空間。如果設置float的元素沒有設置寬度并且無內容時，會縮成一個圓點。不設置寬度時寬度會隨內容的增加而增加。浮動會使當前標簽產生向上浮的效果，同時會影響到前后標簽、父級標簽的位置及 width height 屬性。而且同樣的代碼，在各種瀏覽器中顯示效果也有可能不相同。

清除浮動

對受到影響的元素（一般是緊隨其后的同級元素）添加樣式clear: both，缺點：一般是加上空標簽

，如果頁面浮動布局多，就要增加很多空div。

               div.class3{
                   clear:both;
                   }

父級元素設置寬度和overflow:hidden，不能設置height，瀏覽器會自己捕獲高度。
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。

父級div定義寬度和overflow:auto，不能設置height，瀏覽器會自己捕獲高度。

父級div定義height，直接解決了父級div無法自動獲取到高度的問題
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題，因此不推薦使用，只建議高度固定的布局時使用

父級div定義偽類:after和zoom

   
   .clearfloat:after{
       display:block;
       clear:both;
       content:"";
       visibility:hidden;
       height:0}
  .clearfloat{zoom:1}

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法1有點類似（在末尾設置不顯示的塊級元素，并加上clear:both），zoom(IE轉有屬性)可解決ie6,ie7浮動問題。
優點：瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）。定義公共類后可以減少CSS代碼。

總結

清除浮動的方法中，第五種父級div定義偽類具有較好的瀏覽器兼容性，在大型網站中多有應用，但是代碼復雜，要加深理解。

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

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

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

BFC-塊格式化上下文（block formatting context）

摘要：概念塊格式化上下文，是頁面塊級元素布局及浮動元素彼此交互的區域。阻止相鄰元素外邊距合并的方法被非空內容或分隔開。不在一個普通流中或用分割開。讓在垂直方向上不毗鄰。 BFC概念 BFC（block formatting context）塊格式化上下文，是Web頁面塊級元素布局及浮動元素彼此交互的區域。BFC是一個獨立的布局環境，（實際頁面渲染時是不可見的），由BFC構建的區域其內部元素...

keithyau 2019-08-29 16:07 評論0 收藏0
重新開始學前端之浮動

摘要：寒假來了打算重新學習總結前端的知識要點以及前端領域出現的新東西，因此有了這個系列。在正常布局下中位于該浮動元素之下的內容此時會圍繞著浮動元素。在父元素上設置屬性，如果此屬性設置為或者則可以達到清除浮動的效果。但要注意并不是專門用于清除浮動。寒假來了, 打算重新學習總結前端的知識要點以及前端領域出現的新東西，因此有了這個系列。更多內容可以去我的github: https://githu...

ZoomQuiet 2019-08-22 11:24 評論0 收藏0
重新開始學前端之浮動

摘要：寒假來了打算重新學習總結前端的知識要點以及前端領域出現的新東西，因此有了這個系列。在正常布局下中位于該浮動元素之下的內容此時會圍繞著浮動元素。在父元素上設置屬性，如果此屬性設置為或者則可以達到清除浮動的效果。但要注意并不是專門用于清除浮動。寒假來了, 打算重新學習總結前端的知識要點以及前端領域出現的新東西，因此有了這個系列。更多內容可以去我的github: https://githu...

piapia 2019-08-29 14:11 評論0 收藏0
[譯]HTML&CSS Lesson5: 定位

摘要：浮動定位的其中一種方法就是使用屬性。例如，是一個內聯元素，它默認的值為和值是不生效的。然而，如果我們將這個內聯元素設置為浮動，那么它的默認值會變成這時候和值就生效了。包裹元素就是將浮動元素置于父元素中，父元素作為容器會置于正常的文件流中。 CSS最大的用處之一就是可以將內容和元素定位到任何我們想要的位置，使我們的設計具有結構，使內容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...

YorkChen 2019-08-01 17:39 評論0 收藏0