CSS之輕松搞懂浮動與清除浮動（圖文并茂）

Travis 發(fā)布于2019-08-29 18:44 / 1379人閱讀

摘要：一浮動是什么屬性定義元素在哪個方向浮動。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置。在左右兩側(cè)均不允許浮動元素。比如上面的例子，我們?yōu)榧由希憧汕宄印Ｈ缦乱娮C右浮動右浮動右浮動右浮動最后一個空到哪，的高度就到哪。

一、float（浮動）是什么

float 屬性定義元素在哪個方向浮動。
float:left    元素向左浮動。
float:right     元素向右浮動。
float:none     默認值。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置。
float:inherit     規(guī)定應該從父元素繼承 float 屬性的值。

看一段簡單的代碼：

左浮動
右浮動
喵

  .child1 {
    float: left;
    height: 500px;
    width: 70%;
    background: #aa0;//黃
  }
  .child2 {
    float: right;
    height: 300px;
    width: 30%;
    background: #0aa;//青
  }
  .child3 {
    background: #a0a;//紫
  }

二、clear是什么

clear屬性指定段落的左側(cè)或右側(cè)不允許浮動的元素。
clear:left     在左側(cè)不允許浮動元素。
clear:right     在右側(cè)不允許浮動元素。
clear:both     在左右兩側(cè)均不允許浮動元素。
clear:none     默認值。允許浮動元素出現(xiàn)在兩側(cè)。
clear:inherit     規(guī)定應該從父元素繼承 clear 屬性的值。

比如上面的例子，我們?yōu)?b>child3加上clear: both;，便可清除浮動。（child3的左右兩側(cè)都不允許浮動元素，自然而然不會再跟在倆浮動元素的屁股后面了~）

那么，只在一側(cè)不允許浮動是怎樣的呢？
本來是醬紫的：

child1右浮動
child2右浮動
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈...

  .child1 {
    float: right;
    background: #aa0;//黃
  }
  .child2 {
    float: right;
    background: #0aa;//青
  }

然后，為child2加上clear: right;，在child2的右側(cè)不允許浮動元素，所以child2就飄到了下一行。

那么，為child1加上clear: left;的時候，為什么不起效果呢？在這留個小彩蛋，歡迎大家留言討論~

三、浮動帶來的影響

浮動帶來的最大影響就是，當父元素只包含浮動的子元素的時候，父元素的高度就會塌陷（height變?yōu)?b>0）。
像醬紫：（parent高度為0，無法顯示粉色背景）


    child1右浮動
    child2右浮動


  .parent {
    background: #FBC;//粉
  }

四、清除浮動的方式

在父元素中的結(jié)尾加一個空div

原理：第二大點提到的clear屬性

優(yōu)點：瀏覽器支持好

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


  child1右浮動
  child2右浮動
  


  .child1 {
    float: right;
    background: #aa0;
  }
  .child2 {
    float: right;
    background: #0aa;
  }

可見，空div高度為0，位于父盒子的最下面，使父盒子重新?lián)纹鹆藨械母叨取?br> 為什么要在最后加？倘若你在中間加，效果會是醬紫：

由于空div的左右都不允許浮動元素，那么它就會另起一段，導致盒子位置的效果就像child2清除右側(cè)浮動一樣，child2跑到了child1下方。

可為啥parent父盒子的高度是一個child1盒子的高度？
因為浮動元素會脫離標準文檔流，元素“浮”在標準流之上。父盒子多高和child1、child2在哪里沒關系，空div多“高”，父盒子就多“高”。
如下見證：


  child1右浮動
  
  child1右浮動
  
  child2右浮動
  
  child2右浮動

最后一個空div到哪，parent的高度就到哪。

在父元素設置overflow屬性

原理：設置overflow:hidden或overflow:auto，瀏覽器會自動檢查浮動區(qū)域高度（才能知道父框的內(nèi)容有無溢出）

優(yōu)點：瀏覽器支持好

缺點：子元素若超出父元素尺寸會被隱藏，或者父元素出現(xiàn)滾動條


  child1右浮動
  child2右浮動

當設置overflow:auto;時，父元素會出現(xiàn)滾動條：

偽元素

原理：類似設置clear屬性

優(yōu)點：瀏覽器支持好，普遍


  child1右浮動
  child2右浮動

  .clearfix{
    zoom: 1;    //zoom（IE專有屬性）可解決ie6，ie7浮動問題
    display: block;
  }
  .clearfix:after {
    content: ".";    //content: "";也可
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
  }

完~若有不足，請多指教，不勝感激！歡迎路過的大俠討論~

云服務器 GPU云服務器清除浮動浮動-前端-css html浮動向上浮動上下浮動

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

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

前端筆記之CSS（下）浮動&BFC&定位&Hack

摘要：并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。宋體清除浮動這是專業(yè)術語，其實就是需要我們解決浮動帶來的影響宋體父元素的高度塌陷宋體。相對定位的參考點是自身。一、浮動 1.1 各個語言的主要知識點 HTML：標簽語義化(那么怎么樣布局才是合理的?沒有絕對的對和錯) CSS：　　樣式：　　布局：　　　　標準流(標準文檔流、普通文檔流)：盒子模型(width/height...

番茄西紅柿 2019-04-23 11:44 評論0 收藏0
css魔幻屬性跟進篇

摘要：中是這樣定義的屬性指定一個元素應沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。其同樣適用于設置屬性為絕對定位或固定定位的內(nèi)聯(lián)元素。至于為什么，可以理解為內(nèi)聯(lián)元素沒有盒模型，其高度由內(nèi)容決定。白話：即上一篇我腦中飄來飄去的css魔幻屬性自己的文章推出之后，這是自己寫的第四篇CSS相關的文章，文章絕大部分是自己工作總結(jié)得來，另一部分是平日sf回答的與面試中向面試官交流學到的，都是一...

oogh 2019-08-30 14:16 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

CHENGKANG 2019-08-29 14:11 評論0 收藏0
css常見的各種布局上（兩列布局）

摘要：目錄一大結(jié)構上的導航欄和內(nèi)容區(qū)域兩欄布局博客園為例騰訊課堂個人中心頁慕課網(wǎng)個人中心頁個人中心頁二版的結(jié)構三類似九宮格布局的兩列結(jié)構四圖文兩列布局左圖右文字非垂直居中，左圖，右固定行數(shù)的文字，右側(cè)文字和左邊圖片垂直居中。目錄：一、大結(jié)構上的導航欄和內(nèi)容區(qū)域兩欄布局1、博客園為例2、騰訊課堂個人中心頁3、慕課網(wǎng)個人中心頁4、github個人中心頁二、mini版的nav+cont結(jié)構三、類似九宮格...

番茄西紅柿 2019-04-23 11:40 評論0 收藏0