整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          3種CSS清除浮動的方法

          天這篇文章給大家介紹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;}

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

          OK,現(xiàn)在給.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;}

          效果是這樣的:

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

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

          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,現(xiàn)在給父元素添加一個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;}

          現(xiàn)在刷新后的效果就是:

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

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

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

          動的清除

          實驗:現(xiàn)在有兩個div, div身上沒有任何屬性。每個div中都有l(wèi)i, 這些li都是浮動的。

          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
          <title>Document</title>
          <style type="text/css">
          li{
          float: left;
          width: 90px;
          height: 40px;
          background-color: gold;
          /*文本居中*/
          text-align: center;
          }
          </style>
          </head>
          <body>
          <div>
          <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JS</li>
          <li>HTML5</li>
          <li>設(shè)計模式</li>
          </ul>
          </div>
          <div>
          <ul>
          <li>學(xué)習(xí)方法</li>
          <li>英語水平</li>
          <li>面試技巧</li>
          </ul>
          </div>
          </body>
          </html>

          我們本以為這些li, 會分為兩排, 但是, 第二組中的第1個li, 去貼靠第一組中的最后一個li了。

          第二個div中的li, 去貼第一個div中最后一個li的邊了。

          原因就是因為div沒有高度, 不能給自己浮動的孩子們, 一個容器。

          清除浮動方法1:給浮動的元素的祖先元素加高度。缺陷: 只限于父元素高度確定的情況下。

          如果一個元素要浮動, 那么它的祖先元素一定要有高度。高度的盒子, 才能關(guān)住浮動。

          解決方法:

          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
          <title>Document</title>
          <style type="text/css">
          *{
          margin: 0;
          padding:0;
          }
          div{
          height: 50px; /* 為父元素設(shè)置高度 */
          border: 1px solid #000;
          }
          li{
          float: left;
          width: 90px;
          height: 40px;
          margin-right: 10px;
          background-color: gold;
          /*文本居中*/
          text-align: center;
          }
          </style>
          </head>
          <body>
          <div>
          <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JS</li>
          <li>HTML5</li>
          <li>設(shè)計模式</li>
          </ul>
          </div>
          <div>
          <ul>
          <li>學(xué)習(xí)方法</li>
          <li>英語水平</li>
          <li>面試技巧</li>
          </ul>
          </div>
          </body>
          </html>

          清除浮動方法2:clear:both;

          網(wǎng)頁制作中, 高度height很少出現(xiàn)。為什么? 因為能被內(nèi)容撐高! 那也就是說, 剛才我們講解的方法1, 工作中用的很少。

          腦弄大開:能不能不寫height, 也把浮動清除了呢? 也讓浮動之間, 互不影響呢?

          clear:both;

          clear就是清除, both指的是左浮動、右浮動都要清除。意思就是:清除別人對我的影響。

          這種方法有一個非常大的、致命的問題, margin失效了。

          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
          <title>Document</title>
          <style type="text/css">
          *{
          margin: 0;
          padding:0;
          }
          li{
          float: left;
          width: 120px;
          height: 40px;
          text-align: center;
          background-color: orange;
          }
          .box2{
          clear: both;
          }
          </style>
          </head>
          <body>
          <div class="box1">
          <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JS</li>
          <li>HTML5</li>
          <li>設(shè)計模式</li>
          </ul>
          </div>
          <div class="box2">
          <ul>
          <li>學(xué)習(xí)方法</li>
          <li>英語水平</li>
          <li>面試技巧</li>
          </ul>
          </div>
          </body>
          </html>

          清除浮動方法3:隔墻法

          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
          <head>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
          <title>Document</title>
          <style type="text/css">
          *{
          margin: 0;
          padding:0;
          }
          .box1{
          background-color: gold;
          }
          li{
          float: left;
          width: 120px;
          height: 40px;
          background-color: orange;
          text-align: center;
          }
          .cl{
          clear: both;
          }
          .h8{
          height: 8px;
          _font-size:0;
          }
          .h10{
          height: 10px;
          _font-size:0;
          }
          .h12{
          height: 12px;
          _font-size:0;
          }
          </style>
          </head>
          <body>
          <div class="box1">
          <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JS</li>
          <li>HTML5</li>
          <li>設(shè)計模式</li>
          </ul>
          </div>
          
          <div class="cl h8"></div>
          <div class="box2">
          <ul>
          <li>學(xué)習(xí)方法</li>
          <li>英語水平</li>
          <li>面試技巧</li>
          </ul>
          </div>
          </body>
          </html>

          墻! <div class="cl h18"></div>

          這個墻, 隔開了兩部分浮動, 兩部分浮動, 互不影響。

          近些年, 有演化出了"內(nèi)墻法":

          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
          <title>Document</title>
          <style type="text/css">
          *{
          margin: 0;
          padding:0;
          }
          .box1{
          background-color: gold;
          }
          li{
          float: left;
          width: 120px;
          height: 40px;
          background-color: orange;
          text-align: center;
          }
          .cl{
          clear: both;
          }
          .h16{
          height: 16px;
          }
          </style>
          </head>
          <body>
          <div class="box1">
          <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JS</li>
          <li>HTML5</li>
          <li>設(shè)計模式</li>
          </ul>
          <div class="cl h16"></div>
          </div>
          <div class="box2">
          <ul>
          <li>學(xué)習(xí)方法</li>
          <li>英語水平</li>
          <li>面試技巧</li>
          </ul>
          </div>
          </body>
          </html>

          內(nèi)墻法本質(zhì)-給沒有高的父親撐出高

          因為一個父元素不可能被浮動的子元素?fù)纬龈叨? 解決的方法:內(nèi)墻法

          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
          <title>Document</title>
          <style type="text/css">
          *{
          margin: 0;
          padding: 0;
          }
          div{
          background-color: blue;
          }
          p{
          float: left;
          width: 100px;
          height: 100px;
          background-color: green;
          }
          .cl{ /* 如果沒有清除浮動 , 則父元素的盒子沒有高度, <div>盒子只是一條線*/
          clear: both;
          }
          </style>
          </head>
          <body>
          <div>
          <p></p>
          <div class="cl"></div>
          </div>
          </body>
          </html>

          清除浮動方法4:overflow:hidden;

          overflow就是"溢出"的意思, hidden就是"隱藏"的意思。

          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
          <head>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
          <title>Document</title>
          <style type="text/css">
          div{
          width: 300px;
          height: 300px;
          border: 1px solid red;
          overflow: hidden;
          }
          </style>
          </head>
          <body>
          <div>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</div>
          </body>
          </html>

          本意就是清除溢出到盒子外面的文字。但是, 前端開發(fā)工程師又發(fā)現(xiàn)了, 能做偏方。

          一個父親不能被自己浮動的兒子,撐出高度。但是, 只要給父親加上overflow:hidden; 那么, 父親就能被兒子撐出高了。這是一個偏方。

          div{
          width: 400px;
          border: 10px solid black;
          overflow: hidden;
          }
          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
          <title>Document</title>
          <style type="text/css">
          *{
          margin: 0;
          padding: 0;
          }
          div{
          width: 400px;
          overflow: hidden;
          border: 10px solid black;
          }
          .p1{
          float: left;
          width: 100px;
          height: 150px;
          background-color: red;
          }
          .p2{
          float: left;
          width: 100px;
          height: 380px;
          background-color: yellow;
          }
          .p3{
          float: left;
          width: 100px;
          height: 120px;
          background-color: blue;
          }
          </style>
          </head>
          <body>
          <div>
          <p class="p1"></p>
          <p class="p2"></p>
          <p class="p3"></p>
          </div>
          </body>
          </html>

          浮動清除方法5: 利用偽元素清除浮動

          天在跟一位強迫癥網(wǎng)友聊天時,對方稱自己買了在線視頻網(wǎng)的會員,在欣賞高清大片時總覺得右上角的水印很是礙眼,檔住了部分畫面還影響觀看體驗,問有沒有方法能把這個水印去掉。

          其實在線視頻網(wǎng)站這種技術(shù)就是在播放視頻時,在瀏覽器的后臺里執(zhí)行了一小段JS代碼把自家的LOGO水印加上去的,我們完全也可以用一段JS代碼再它去掉。如果也有小伙伴嫌水印礙眼的話,請往下看。

          打開你要播放的視頻頁,右鍵點擊頁面選審查元素或是直接在瀏覽器里按F12,然后點擊Console(控制臺),把下面的代碼粘貼到里,按下回車,就會發(fā)現(xiàn)畫面上的水印已經(jīng)不在了。

          來看下效果

          去除前

          去除后

          用這種方法去掉的水印,你可以連續(xù)播放或是切換集數(shù)都不會再出現(xiàn)水印,但只要你一刷新瀏覽器水印就會出來了。那時再按上述辦法操作一遍即可,如果還嫌麻煩,你可以把這段代碼加入到收藏夾里。

          點開一個空白的網(wǎng)頁,點收藏,然后把網(wǎng)址修改成這段JS代碼,以后用的時候直接點下收藏夾就運行了。

          去水印JS代碼:

          var myCss= document.createElement('style'); myCss.innerHTML ='.txp_waterMark_pic,.logo-new,.iqp-logo-box{display:none!important;}';document.body.appendChild(myCss);void(0);

          如果本文給您帶來了幫助,歡迎點贊收藏并轉(zhuǎn)發(fā)!


          主站蜘蛛池模板: 在线观看中文字幕一区| 一区二区三区在线免费看| 亚洲综合国产一区二区三区| 亚洲欧美日韩一区二区三区在线 | 国产成人精品一区二区三区| 97一区二区三区四区久久| 日韩免费视频一区二区| 一区二区三区免费在线视频| 怡红院AV一区二区三区| 无码国产精品久久一区免费| 亚洲国产综合精品中文第一区| 亚洲A∨精品一区二区三区| 激情爆乳一区二区三区| 国产熟女一区二区三区五月婷| 亚州AV综合色区无码一区| 伊人久久一区二区三区无码 | 无码人妻精品一区二区三区夜夜嗨 | jazzjazz国产精品一区二区| 国产精品亚洲专区一区| 在线电影一区二区| 国产日韩精品一区二区在线观看播放| 97精品国产一区二区三区| 国产精品一区在线麻豆| 无码中文字幕乱码一区| 国产SUV精品一区二区四| 正在播放国产一区| 小泽玛丽无码视频一区| 久久久久国产一区二区三区| 人妻少妇AV无码一区二区| 国产美女av在线一区| 国产一区二区免费| 亚洲天堂一区二区三区| 免费无码A片一区二三区| 国产一区二区在线|播放| 国产99精品一区二区三区免费| 无码精品久久一区二区三区 | 亚洲毛片αv无线播放一区| 性无码一区二区三区在线观看| 色偷偷av一区二区三区| 亚洲国产AV无码一区二区三区| 无码中文字幕人妻在线一区二区三区 |