整合營銷服務商

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

          免費咨詢熱線:

          HTML如何輕而易舉清除浮動

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

          清除浮動的目的:解決父盒子高度為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也可,可根據具體情況使用。

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

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

          什么要清除浮動?

          一開始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
          來源:掘金

          天這篇文章給大家介紹3種CSS清除浮動的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。

          首先,這里就不講為什么我們要清楚浮動,反正不清除浮動事多多。

          下面我就講3種常用清除浮動的方法,夠用了。

          1、在浮動元素后面加一個空的div,并為它清除浮動

          html代碼:

          <div class="wrap">   <div class="float">浮動</div>   <div class="clear"></div>   <div class="nofloat">不想被浮動影響</div></div>

          css代碼:

          .wrap{  width:500px;  height:400px;  border:1px solid red;  margin:0 auto;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}.nofloat{    width:300px;    height:150px;    background:red;}

          現在雖然加了一個空的div,但是并沒有給它清除浮動,所以目前的效果就是第三個子元素.nofloat還是收到浮動的影響。

          OK,現在給.clear加上清除浮動:

          .clear{    clear:both;}

          刷新一下效果就出來了:

          PS:這種情況比較適合元素之間是垂直排列布局的,為了不受彼此浮動的影響。

          2、利用BFC特性清除浮動

          html代碼:

          <div class="wrap">   <div class="float">浮動</div>   <div class="nofloat">不想被浮動影響</div></div>

          css代碼:

          .wrap{  width:500px;  border:1px solid red;  margin:0 auto;  overflow:hidden;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}.nofloat{    width:300px;    height:150px;    background:red;    overflow:hidden;}

          效果是這樣的:

          這里父容器是沒有設置固定高度的,本來第一個子元素浮動之后,父元素的高度會塌陷到跟第二個子元素一樣高,但由于這里分別給第二個子元素和父元素都設置了overflow:hidden ,所以它們都生成了一個新的BFC區域,根據上文提供的BFC布局規則可以得知:BFC區域不會與float box 重疊;計算BFC高度時浮動元素的高度也參與計算。

          所以就得到清除浮動的效果。說得比較繞,但其實清除浮動得根據自己開發中的實際情況合理使用。

          3、使用:after偽元素,給浮動元素的父元素清除浮動

          html代碼:

          <div class="wrap">   <div class="float">浮動</div></div>

          css代碼:

          .wrap{  width:500px;  border:1px solid red;  margin:0 auto;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}

          此時子元素浮動了,脫離了文檔流,所以父元素高度酒塌陷了:

          可以看到父元素的邊框擠在一起了。

          OK,現在給父元素添加一個clearfix類:

          <div class="wrap clearfix">   <div class="float">浮動</div></div>
          .clearfix{    *zoom:1;}.clearfix:after{    content:'clear';    display:block;    height:0;    clear:both;    overflow:hidden;    visibility:hidden;}

          現在刷新后的效果就是:

          這種方法和BFC清除浮動個人用的比較多,實際開發中,其實這兩種就夠用了。

          好的,清除浮動我也就簡單地提到這里!

          以上就是CSS清除浮動的幾種方法的詳細內容。如果有什么錯誤的話,歡迎留言指正。


          主站蜘蛛池模板: 国产成人一区二区三区视频免费| 亚洲爽爽一区二区三区| 福利国产微拍广场一区视频在线| 伊人久久精品无码麻豆一区| 日韩成人无码一区二区三区 | 日韩亚洲AV无码一区二区不卡| 亚洲国产一区二区a毛片| 中文字幕在线一区二区三区| 国产韩国精品一区二区三区久久| 国产内射在线激情一区| 在线精品动漫一区二区无广告| 午夜在线视频一区二区三区| 久久一区二区三区免费播放| 国产乱码一区二区三区爽爽爽| 国产vr一区二区在线观看| 无码人妻精品一区二 | 一区二区三区国模大胆| 色一乱一伦一区一直爽| 国产精品亚洲综合一区在线观看| 亚洲av综合av一区二区三区| 国内自拍视频一区二区三区| 五十路熟女人妻一区二区| 亚洲Av永久无码精品一区二区| 久久蜜桃精品一区二区三区| 亚洲乱色熟女一区二区三区蜜臀 | 亚洲成a人一区二区三区| 无码人妻一区二区三区在线水卜樱| 国产福利一区视频| 精品少妇一区二区三区在线| 国产在线无码一区二区三区视频 | 亚洲乱码av中文一区二区 | 无遮挡免费一区二区三区| 日本免费电影一区| 国产福利微拍精品一区二区| 日韩欧国产精品一区综合无码| 一区二区三区精品视频| 成人精品一区二区户外勾搭野战 | 亚洲av一综合av一区| 国偷自产av一区二区三区| 农村人乱弄一区二区 | 国产精品久久久久一区二区三区|