CSS清除浮動float的三種方法總結(jié)，為什么清浮動？浮動會有那些影響？

MAX_zuo 發(fā)布于2019-08-28 18:28 / 2001人閱讀

摘要：方法三據(jù)說是最高大上的方法方法注意作用于浮動元素的父親先說原理這種方法清除浮動是現(xiàn)在網(wǎng)上最拉風的一種清除浮動，他就是利用和來在元素內(nèi)部插入兩個元素塊，從面達到清除浮動的效果。的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現(xiàn)清楚浮動。

一、拋一塊問題磚（display： block）先看現(xiàn)象：

分析HTML代碼結(jié)構(gòu)：



    1
    2
    3

分析CSS代碼樣式：

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}

這里我沒有給最外層的DIV.outer 設置高度，但是我們知道如果它里面的元素不浮動的話，那么這個外層的高是會自動被撐開的。但是當內(nèi)層元素浮動后，就出現(xiàn)了一下影響：

（1）：背景不能顯示（2）：邊框不能撐開（3）：margin 設置值不能正確顯示

二、清楚css浮動：

方法一：添加新的元素、應用 clear：both；

HTML：


    1
    2
    3

CSS：

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

result：（糾正： padding不會受影響）

方法二：父級div定義 overflow: auto（注意：是父級div也就是這里的 div.outer）

HTML：

 //這里添加了一個class
    1
    2
    3

CSS：

.over-flow{
    overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題
}

結(jié)果：當然是實現(xiàn)了！ img{display: none}; 略圖

原理：使用overflow屬性來清除浮動有一點需要注意，overflow屬性共有三個屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值，如果使用這個值將無法達到清除浮動效果，其他兩個值都可以，其區(qū)據(jù)說在于一個對seo比較友好，另個hidden對seo不是太友好，其他區(qū)別我就說不上了，也不浪費時間。

方法三： 據(jù)說是最高大上的方法 :after 方法：（注意：作用于浮動元素的父親）

先說原理：這種方法清除浮動是現(xiàn)在網(wǎng)上最拉風的一種清除浮動，他就是利用:after和:before來在元素內(nèi)部插入兩個元素塊，從面達到清除浮動的效果。其實現(xiàn)原理類似于clear:both方法，只是區(qū)別在于:clear在html插入一個div.clear標簽，而outer利用其偽類clear:after在元素內(nèi)部增加一個類似于div.clear的效果。下面來看看其具體的使用方法：

 .outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
 .outer :after {clear:both;content:".";display:block;width: 0;height: 0;visibility:hidden;}/*==for FF/chrome/opera/IE8==*/

其中clear:both;指清除所有浮動；content: ".";
display:block;對于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現(xiàn)清楚浮動。

最后：但不是不重要，也不是不知道！

 下一標簽直接清浮動兄弟標簽浮動時，在下一標簽的屬性中直接寫入清除clear:both;
 這樣就可以清除以上標簽的浮動而不用加入空標簽來清除浮動。

結(jié)語：清除浮動的方式雖然是有很多種，但是不是每種都適合你，也不是每種都能很好的兼容所有瀏覽器，所以參照你覺得最好的方式去做，個人覺得方法三不錯，不需多于的標簽，而且也能很好的兼容。再次again：當一個內(nèi)層元素是浮動的時候，如果沒有關閉浮動時，其父元素也就不會再包含這個浮動的內(nèi)層元素，因為此時浮動元素已經(jīng)脫離了文檔流。也就是為什么外層不能被撐開了！

GPU云服務器云服務器 html清浮動清除浮動 html浮動的影響浮動-前端-css

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111246.html

簡述清除浮動

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

FuisonDesign 2019-08-29 12:35 評論0 收藏0
css清浮動

摘要：元素浮動會讓元素脫離文檔流，從而不能撐開父級的內(nèi)容。今天我將展示常見的清除浮動的方法。什么是浮動什么是浮動浮動元素脫離文檔流并且向左或者向右移動，直到浮動元素的邊緣碰到父級框或者另一個浮動元素的邊框為止。允許浮動元素出現(xiàn)在兩側(cè)。我們在平常做項目的時候，float這個css屬性經(jīng)常會用到。元素浮動會讓元素脫離文檔流，從而不能撐開父級的內(nèi)容。今天我將展示常見的清除浮動的方法。什么是浮動浮動元...

EdwardUp 2019-04-23 13:46 評論0 收藏0
圍住浮動元素的三種方法

摘要：由于包含元素一定會包圍非浮動的子元素而且清除會讓這個子元素位于清除一側(cè)浮動元素的下方因此包含元素一定會包含這個子元素以及前面的浮動元素。浮動元素脫離了文檔流,其父元素也看不到它了,因而也不會包圍它。這種情況有時候并非我們想要的,下面向大家傳授三種圍住浮動子元素的方法。記住,這三種方法你都得掌握,這樣才能審時度勢,選擇最合適的一種。為了演示浮動元素的行為,這種行為對布局會產(chǎn)生...

Bowman_han 2019-08-28 18:07 評論0 收藏0
理解CSS浮動與清理

摘要：浮動為什么會有文本環(huán)繞效果產(chǎn)生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現(xiàn)很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。本文主要討論以下幾個問題：1.浮動的原始用途...

Tonny 2019-08-29 12:23 評論0 收藏0
理解CSS浮動與清理

摘要：浮動為什么會有文本環(huán)繞效果產(chǎn)生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現(xiàn)很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。本文主要討論以下幾個問題：1.浮動的原始用途...

cyqian 2019-08-01 16:39 評論0 收藏0