了解CSS浮動以及清理浮動（Float）

TZLLOG 發布于2019-08-28 18:08 / 2376人閱讀

摘要：浮動浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，相當于不占用空間，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

CSS浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，相當于不占用空間，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

CSS 浮動屬性

css中，我們使用float來實現浮動，使用方法如下：


img{
  float:right;
}

float屬性值有以下幾種：

left：元素向左浮動
right：元素向右浮動
none：默認值。元素不浮動，并會顯示在其文本出現的位置
inherit：從父元素繼承float屬性

瀏覽器支持

所有的主瀏覽器都支持float，但是IE均不支持"inherit"

CSS浮動情形

下面介紹浮動的使用情形及問題：

如下圖所示，當把框1向右浮動時，它脫離文檔流向右移動，直到它的右邊框碰到包含框

浮動意味著脫離文檔流，可能會引發一系列的問題，比如，將上圖的框1移向左邊，那么框1在文檔中相當于沒有，框2，框3上移，表現出來就是框2消失不見

如果想要解決這個問題的話，可以三個框同時左移，就不會有覆蓋的情況，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

同時移動也帶來一些問題，如果包含框太窄，沒辦法容納三個框，這個時候該怎么辦?

這個時候浮動塊就會進行調節，如下圖所示，第三個框會自動向下浮動，直到有足夠的空間，如果浮動過程中發現有浮動框高度不一致，則會被卡住

浮動清理

由上我們可以看出，浮動會影響后面的元素，那怎么清理浮動呢，現總結以下幾個方法：

使用帶clear的空<div>標簽

在浮動元素后添加一個空元素，如

,然后在css中添加.clear{clear:both}即可。或者是
,都行(圖片講解更清晰)

這是最為常用的一種辦法，兼容所有主流瀏覽器,但這種辦法使用了大量的無用標簽，不推薦

使用::after偽元素

利用浮動元素的容器的::after偽元素來清楚浮動，由于::after偽元素只對塊級元素有用，因此要設置display:block，通過::after偽元素在浮動結束之后，向其中添加看不見的空格“20”或者是點".",我們也可以使用 content:""

需要注意的是IE6，IE7不支持after偽元素，因此要添加.clearfix{zoom:1}；來觸發haslayout，或者你可以把它寫到IE6、7的CSS hacker文件里，這樣不會影響W3C標準驗證

使用鄰接元素清除

直接給浮動元素的下一個元素添加一個clear：both；但是要注意一點，必須保證這個元素和浮動元素是在一層container中，如果在浮動元素的下一層的話，還是老老實實用::after偽元素吧

使用overflow屬性

給浮動元素的容器添加overflow:hidden；(overflow:auto)。
這個辦法很有意思啊，我們知道，在使用float之后，元素會調到容器上層，但是使用overflow:hidden；之后，浮動元素又回到了容器中，把容器高度撐起，達到了清理浮動的作用（詳解見圖）

將容器設置成float

給浮動元素的容器也添加上浮動屬性即可清理內部浮動。同overflow法一樣無須添加額外的class，使用方便但是會對下面的文檔造成影響。

這種做法屬于一時爽的類型，因為給容器設置浮動之后，對后面的布局也產生影響，不建議使用

使用display:table

采用display:table/display:table-cell 等table系列屬性將父元素變成 table 形式自動包含浮動元素。當容器被設置成了table或table-cell時，同時也創建了css2規定的block formatting contexts，這樣父容器就包含了元素的高度

為什么我把它放在這么后面呢，因為，兼容性問題又來了。。display:talbe 系列樣式設定不在 IE6/7 的支持范圍之內

觸發 hasLayout 清除

為了解決殺千刀的IE，特地來解決一下,首先，我們了解一下IE里的layout：
"layout"是IE的專有概念，它決定了元素如何對其內容進行定位和計算，與其他元素的關系和相互作用，以及對應用還有使用者的影響
"Layout" 可以被某些 CSS property（特性）不可逆的觸發，而某些 HTML 元素本身就具有 layout 。
"Layout" 在 IE 中可以通過 hasLayout 屬性來判斷一個元素是否擁有 layout ，如 object.currentStyle.hasLayout 。
"Layout" 是 IE 瀏覽器渲染引擎的一個內部組成部分。在 IE 瀏覽器中，一個元素要么自己對自身的內容進行組織和計算大小，要么依賴于包含塊來計算尺寸和組織內容。為了協調這兩種方式的矛盾，渲染引擎采用了 "hasLayout" 屬性，屬性值可以為 true 或 false。當一個元素的 "hasLayout" 屬性值為 true 時，我們說這個元素有一個布局（layout），或擁有布局。

看到這兒我們就很清楚了嘛，觸發一下layout就可以清楚浮動了嘛，所以我們可以對容器用以下幾種姿勢來清除浮動


haslayout-clear-float:{width:1px}
或
.haslayout-clear-float:{height:1px}
或
.haslayout-clear-float:{zoom:1}

可觸發 hasLayout 的 CSS 特性有以下幾種：
display: inline-block;
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute;
writing-mode: tb-rl;
zoom: (除 normal 外任意值)

注意：layout屬性只有IE有，并且IE6以前的版本任何的height和width都會觸發layout屬性，可以依靠計算布局清理浮動的 haslayout 特性僅在 IE 6/7 中存在，IE8 之后將使用 CSS 2.1 的 Block Formatting Contexts 定義來達到同樣效果。

GPU云服務器云服務器浮動-前端-css html浮動向上浮動上下浮動左右浮動

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

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

CSS布局 ——從display，position， float屬性談起

摘要：生成相對定位的元素，相對于元素本身正常位置進行定位。元素的位置通過以及屬性進行規定。因為絕對定位與文檔流無關，所以絕對定位的元素可以覆蓋頁面上的其他元素，可以通過屬性控制疊放順序，越高，元素位置越靠上。頁面布局，或者是在頁面上做些小效果的時候經常會用到 display,position和float 屬性，如果對它們不是很了解的話，很容易出現一些莫名其妙的效果，痛定思痛讀了《CSS Maste...

hover_lew 2019-04-23 13:44 評論0 收藏0
簡述清除浮動

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

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

摘要：清除浮動方法方法一使用帶屬性的空元素在浮動元素后使用一個空元素如，并在中賦予屬性即可清理浮動。什么是CSS清除浮動？在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象...

劉厚水 2019-08-30 12:54 評論0 收藏0
清楚浮動/邊界塌陷bfc

摘要：不會重疊浮動元素可以包含浮動我們可以利用的第三條特性來清浮動，這里其實說清浮動已經不再合適，應該說包含浮動。總而言之清理浮動兩種方式利用屬性，清除浮動使父容器形成 CSS清浮動處理（Clear與BFC）在CSS布局中float屬性經常會被用到，但使用float屬性后會使其在普通流中脫離父容器，讓人很苦惱 1 浮動帶來布局的便利，卻也帶來了新問題復制代碼 1 2 3 4 ...

remcarpediem 2019-08-30 11:25 評論0 收藏0
理解CSS浮動與清理

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

Tonny 2019-08-29 12:23 評論0 收藏0