整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS-清除浮動所有方法總結

          CSS-清除浮動所有方法總結

          什么要清除浮動?

          一開始css的浮動,其本質是用來做一些文字混排效果的,但是后來被我們拿來做布局用,就出現了很多問題。

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

          我們很多時候不方便給父盒子的高度,因為我們不清除有多少子盒子,有多少內容。經常的做法會讓內容撐開父盒子的高度。 但是如果父盒子中有子盒子浮動了之后,就會影響到后面的盒子,因為浮動元素脫離了標準流。會把后面還在標準流的盒子覆蓋,解決這個問題的方法就要清除浮動

          原理圖



          如何清除浮動?

          清除浮動其實叫做 閉合浮動 更合適,因為是把浮動的元素圈起來,讓父元素閉合出口和入口不讓他們出來影響其他的元素。 在CSS中,clear屬性用于清除浮動,其基本語法格式如下:

          選擇器 { clear : 屬性值 ; }
          /*屬性值為left,清除左側浮動的影響
            屬性值為right,清除右側浮動的影響
            屬性值為both,同時清除左右兩側浮動的影響*/
          復制代碼

          1. 額外標簽法

          1.1 末尾標簽法

          通過在浮動元素的末尾添加一個空的標簽。這是W3C推薦的做法,雖然比較簡單,但是添加了無意義的標簽,結構化比較差,所以不推薦使用。下面三種寫法都適用:

          <!--寫法一:直接用style-->
          <div style="clear:both"></div>
          
          <!--寫法二:使用clear類-->
          <style>
          .clear { clear:both }
          </style>
          <div class="clear"></div>
          
          <!--寫法三:可以使用br等別的塊級元素來清除浮動-->
          <style>
          .clear { clear:both }
          </style>
          <br class="clear" />

          1.2 內部標簽法

          把div放進父盒子里,這樣盒子會撐開,一般也不會用。

          2. overflow

          給父級元素添加overflow樣式方法。

          這種方法代碼比較簡潔,可以通過觸發BFC方式,但是因為本身overflow的本質是 溢出隱藏 的效果,所以有的時候也會有一些問題存在,比如內容增多的時候不會自動換行導致內容被隱藏掉,無法顯示出要溢出的元素。

          .father {
                overflow: auto;  
              /* 加上這句話,就可以清除浮動   overflow=hidden|auto|scroll 都可以實現*/
            }
          復制代碼

          3. 偽元素法(最常用)

          3.1 使用after偽元素清除浮動

          after是在父元素中加一個盒子,這個元素是通過css添加上去的,符合閉合浮動思想,結構語義化正確。 父元素中加一個類名為clearfix 。但是這個方法IE6-IE7不識別,要進行兼容,使用zoom:1觸發hasLayout來清除浮動

          代表網站:百度、淘寶、網易等

          .clearfix:after{
              content:".";  /*盡量不要為空,一般寫一個點*/
              height:0;     /*盒子高度為0,看不見*/
              display:block;    /*插入偽元素是行內元素,要轉化為塊級元素*/
              visibility:hidden;      /*content有內容,將元素隱藏*/
              clear:both;  
          }
          
          .clearfix {
              *zoom: 1;   /*  *只有IE6,7識別 */
          }
          復制代碼

          3.2 after偽元素空余字符法

          父元素中加一個類名為clearfix,也需要兼容IE6-IE7

          在Unicode字符里有一個“零寬度空格”,即U+200B,代替“.”,可以減少代碼量,不再使用visibility:hidden

          代表網站:阿里巴巴

          .clearfix::after{
              content:"\200B";   /* content:'\0200'; 也可以 */
              display:block;
              height:0;
              clear:both;
          }
          
          .clearfix {
              *zoom: 1; 
          }
          復制代碼

          3.3 使用before和after雙偽元素清除浮動(推薦)

          這種方法完全符合閉合浮動思想。給父元素加一個類名為clearfix,需要兼容IE6-IE7

          代表網站:小米、騰訊

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

          三種方法總結

          ?copyright burning.

          最后在這里說一下,目前在職web前端開發,如果你現在在學習web前端,在整個前端入門的學習過程當中,有遇見任何關于學習方法,學習路線,學習效率等方面的問題,或者缺乏基礎入門的視頻教程,前端面試題,學習手冊,開發工具,PDF文檔書籍教程,都可以隨時關注并私信我:前端 ,系統自動堅持會發送交流圈子,可以來自行獲取下載。


          作者:頑皮的雪狐七七
          鏈接:https://juejin.cn/post/6901903789197197325
          來源:掘金

          動的目的:把多個盒子放在一行上

          清除浮動的目的:解決父盒子高度為0的問題

          清除浮動,也稱閉合浮動

          注:本文不兼容IE6

          未清除浮動實現情況:

          圖1

          清除后:

          圖2

          原代碼:

          復制代碼

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>清除浮動</title>

          <style type="text/css">

          .content{

          width:960px;

          margin:100px auto;

          border: 1px solid #ccc;

          }

          .left{

          width:400px;

          height: 200px;

          background-color: green;

          float: left;

          }

          .right{

          width: 400px;

          height: 200px;

          background-color: red;

          float: right;

          }

          </style>

          </head>

          <body>

          <div class="content">

          <div class="left"></div>

          <div class="right"></div>

          </div>

          </body>

          </html>

          復制代碼

          具體方法:

          1.額外標簽法

          在含浮動標簽后加兄弟盒子清除浮動

          例:

          復制代碼

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>清除浮動</title>

          <style type="text/css">

          .content{

          width:960px;

          margin:100px auto;

          border: 1px solid #ccc;

          }

          .left{

          width:400px;

          height: 200px;

          background-color: green;

          float: left;

          }

          .right{

          width: 400px;

          height: 200px;

          background-color: red;

          float: right;

          }

          .clearbox{

          clear:both;

          }

          </style>

          </head>

          <body>

          <div class="content">

          <div class="left"></div>

          <div class="right"></div>

          <div class="clearbox"></div>

          </div>

          </body>

          </html>

          復制代碼

          缺點:添加了許多空div

          2.給父盒子overflow:hidden

          觸發bfc模式(該名詞不懂請谷歌/百度,初學者可暫時略過),直接清除浮動

          復制代碼

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>清除浮動</title>

          <style type="text/css">

          .content{

          width:960px;

          margin:100px auto;

          border: 1px solid #ccc;

          overflow: hidden;

          }

          .left{

          width:400px;

          height: 200px;

          background-color: green;

          float: left;

          }

          .right{

          width: 400px;

          height: 200px;

          background-color: red;

          float: right;

          }

          .clearbox{

          clear:both;

          }

          </style>

          </head>

          <body>

          <div class="content">

          <div class="left"></div>

          <div class="right"></div>

          </div>

          </body>

          </html>

          復制代碼

          缺點:不可與position屬性配合使用

          3.偽元素法

          給父元素定義偽類:after(此處使用的是公共類clearfix)

          復制代碼

          .clearfix:after{

          content:"";/*內容為空*/

          visibility:hidden;/*將元素隱藏,但是在網頁中該占的位置還是占著*/

          display:block;/*變成塊級元素*/

          height:0;

          clear:both;/*清除浮動*/

          }

          復制代碼

          具體代碼:

          復制代碼

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>清除浮動</title>

          <style type="text/css">

          .clearfix:after{

          content:"";/*內容為空*/

          visibility:hidden;/*將元素隱藏,但是在網頁中該占的位置還是占著*/

          display:block;/*變成塊級元素*/

          height:0;

          clear:both;/*清除浮動*/

          }

          .content{

          width:960px;

          margin:100px auto;

          border: 1px solid #ccc;

          }

          .left{

          width:400px;

          height: 200px;

          background-color: green;

          float: left;

          }

          .right{

          width: 400px;

          height: 200px;

          background-color: red;

          float: right;

          }

          .clearbox{

          clear:both;

          }

          </style>

          </head>

          <body>

          <div class="content clearfix">

          <div class="left"></div>

          <div class="right"></div>

          </div>

          </body>

          </html>

          復制代碼

          缺點:IE8以上和非IE瀏覽器才支持

          4.雙偽元素法

          給父類加上偽類:before和:after

          復制代碼

          .clearfix:before,.clearfix:after{

          content:"";

          display:table;

          }

          .clearfix:after{

          clear:both;

          }

          復制代碼

          具體代碼:

          復制代碼

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>清除浮動</title>

          <style type="text/css">

          .clearfix:before,.clearfix:after{

          content:"";

          display:table;

          }

          .clearfix:after{

          clear:both;

          }

          .content{

          width:960px;

          margin:100px auto;

          border: 1px solid #ccc;

          }

          .left{

          width:400px;

          height: 200px;

          background-color: green;

          float: left;

          }

          .right{

          width: 400px;

          height: 200px;

          background-color: red;

          float: right;

          }

          .clearbox{

          clear:both;

          }

          </style>

          </head>

          <body>

          <div class="content clearfix">

          <div class="left"></div>

          <div class="right"></div>

          </div>

          </body>

          </html>

          復制代碼

          附:

          對于上述4種方法,優先推薦方法3和4,當然1和2也可,可根據具體情況使用。

          還有幾種亂七八糟的清除浮動方法,但是缺點多,故不提起.

          最后你覺得我們的文章對你有幫助,歡迎關注我,可以私信我:久伴,領取學習資料,在評論下方可以關注我的學習群,你可以隨時在上面向我們提問,把你在學習前端過程中所遇到的問題發給我們。我們每天都會按時回復大家的每一個問題,希望久伴可以伴隨你從入門到專家。

          首先我們通過一張圖來解釋下元素浮動是什么樣的狀態。

          元素浮動情況

          上圖的html部分代碼為:

          html代碼

          css部分代碼為:

          css代碼

          通過上面的圖片可以看出,當內部的div設置float后,外部的元素的就會受到以下影響:

          • 背景不能顯示

          • 邊框不能被撐開

          • margin和padding設置的值不能正確顯示

          元素浮動的壞處

          如果不清除元素浮動的話,浮動層后面的非浮動層內容就有可能被覆蓋,造成頁面的排版混亂。

          例如在上面的例子中再加一個非浮動的div,就會發現該div被前面的三個浮動div覆蓋住。

          因為浮動,后面的div被覆蓋

          既然會出現這種情況,我們就應該設法清除掉元素的浮動。

          方法1-父級元素設定定高

          我們可以給父級元素.outer設置為定高,這樣就可以不影響后面的非浮動元素。.outer的樣式為:

          設置定高

          達到的效果為

          清楚浮動之后

          雖然這種方法可以清楚浮動,但是對父元素設置定高會有很多的限制,如果內層div的高度變化,則需要手動修改外層div的高度,相對來說有點麻煩,因此這種方法并不推薦。

          方法2-添加新元素,設置clear:both

          在父元素內部的末尾處添加一個新的div,并設置其clear: both;屬性。

          添加一個新的div

          該新增div的css屬性為:

          新增div的css屬性

          利用該方法同樣可以達到清楚浮動的效果,但是由于會新增DOM元素,這種方法也不推薦。

          方法3-父級元素使用overflow:hidden屬性

          在父級元素上使用overflow:hidden屬性,準確來說只要不給overflow屬性設置為visible都可以清除元素浮動。

          設置overflow: hidden

          使用這種方法可以少寫很多css樣式代碼,同時不會新增DOM元素,因此推薦使用這種方式。

          方法4-對父元素使用偽元素

          通過對父元素使用:after偽元素,同樣可以達到清除浮動的效果。

          偽元素清楚浮動

          以上方法在偽元素中,通過設置clear與overflow屬性來實現。方法4在實際的項目中使用的頻率最高,因此極大的推薦使用方法4來清除元素浮動。

          其他方法

          看到網上有的資料介紹,通過設置父元素為浮動,或者設置父元素為absolute定位,這兩種方法只是能顯示父元素而已,但父元素同樣會覆蓋到后面的非浮動元素,因此這兩種方法嚴格意義來說并不算清除浮動的方法。

          總結

          今天這篇文章主要介紹了幾種通過CSS來清除元素浮動的方法,你掌握了嗎?


          主站蜘蛛池模板: 精品国产一区二区三区无码| 国产精品一区三区| 日产精品久久久一区二区| 精品一区二区三区在线观看视频 | 无码国产精品一区二区免费式影视| 无码人妻精品一区二区蜜桃网站| 变态调教一区二区三区| 午夜影视日本亚洲欧洲精品一区| 2018高清国产一区二区三区| 大伊香蕉精品一区视频在线| 日韩精品一区二区三区老鸭窝| A国产一区二区免费入口| 国产福利日本一区二区三区| 日本不卡一区二区三区| 国产一区二区三区在线| 亚洲AV成人精品一区二区三区| 国产亚洲无线码一区二区| 人妻内射一区二区在线视频| 亚洲乱码一区二区三区国产精品| 国产在线精品一区免费香蕉| 国产suv精品一区二区6| 精品国产一区二区三区久久狼 | 久夜色精品国产一区二区三区| 无码午夜人妻一区二区不卡视频| 精品无码AV一区二区三区不卡| 中文字幕一区二区三区在线播放| 精品一区二区三区影院在线午夜| 亚洲欧美日韩中文字幕一区二区三区 | 精品少妇人妻AV一区二区三区| 国产在线一区二区三区| 精品国产亚洲一区二区三区 | 日韩人妻一区二区三区蜜桃视频| 中文字幕永久一区二区三区在线观看 | 色狠狠色噜噜Av天堂一区| 国产午夜精品一区二区三区不卡| 亚洲国产成人久久一区WWW | 中文字幕一区二区人妻性色 | 亚洲AV无码一区二区乱孑伦AS| 久久精品视频一区| 国产精品高清视亚洲一区二区 | 一本大道在线无码一区|