整合營銷服務商

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

          免費咨詢熱線:

          HTML+CSS:css清除浮動的幾種方式,哪種最合適?

          篇文章我們說了元素的浮動,本篇文章主要介紹下css浮動帶來的影響,以及如何清除浮動。

          細心的人可能發現了,在我們上篇文章寫的導航條中存在一個問題,那就是使用了float之后,父級盒子的高度變為0了。我們來寫一個例子來看一下,創建一個父級div,并設置border屬性,然后下邊創建兩個子元素span,并設置浮動。具體代碼如下所示:

          由上圖可以看出,在給span添加了float之后,父級元素div的高度就變成了0。我們有以下幾種方式來解決這個問題

          (1)給父級元素單獨定義高度(height)

          原理:如果父級元素沒有定義高度,父元素的高度完全由子元素撐開時,父級div手動定義height,就解決了父級div無法自動獲取到高度的問題。

          優點:簡單、代碼少、容易掌握。

          缺點:只適合高度固定的布局,要給出精確的高度,如果高度和父級div不一樣時,會產生問題。對于響應式布局會有很大影響。

          (2)在標簽結尾處加空div標簽 clear:both

          原理:添加一個空div,利用css提高的clear:both清除浮動,讓父級div能自動獲取到高度。

          優點:簡單、代碼少、瀏覽器支持好、不容易出現怪問題

          缺點:不少初學者不理解原理;如果頁面浮動布局多,就要增加很多空div,不利于頁面的優化。

          (3)父級div定義 偽類:after 和 zoom

          原理:元素生成偽類的作用和效果相當于方法2中的原理,但是IE8以上和非IE瀏覽器才支持:after,zoom(IE轉有屬性)可解決ie6,ie7浮動問題

          優點:瀏覽器支持好、不容易出現怪問題,寫法是固定的,不理解也可以直接復制使用;(小編大力推薦使用此種方法,簡單便捷,只需添加一個class即可解決問題)

          缺點:css代碼多、不少初學者不理解原理,要兩句代碼結合使用才能讓主流瀏覽器都支持。

          (4)父級div定義 overflow:hidden

          優點:簡單、代碼少、瀏覽器支持好

          缺點:不能和position配合使用,因為超出的尺寸的會被隱藏。(不建議使用此種方式,可能會影響頁面元素布局)

          好了,本篇文章就給大家說到這里,大家自己下來可以這幾種方式都試一試,自己感覺下哪種更適合自己,小編一直使用的是第3種方式。


          每日金句:這次本來可以咸魚翻身的,沒想到粘鍋了。喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。

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

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

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

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


          主站蜘蛛池模板: 色一情一乱一区二区三区啪啪高| 中文字幕精品无码一区二区| 亚洲片国产一区一级在线观看| 亚洲夜夜欢A∨一区二区三区| 国产精品高清一区二区三区不卡| 又紧又大又爽精品一区二区| 亲子乱av一区区三区40岁| 亚洲AV无码一区二区二三区入口 | 无码精品人妻一区二区三区人妻斩 | 91秒拍国产福利一区| 亚洲国产成人久久综合一区77| 国产精品高清视亚洲一区二区| 香蕉久久av一区二区三区| 成人国内精品久久久久一区| 一区二区三区四区国产| 国产伦精品一区二区三区视频小说| 亚洲另类无码一区二区三区| 日本视频一区在线观看免费 | 一区二区三区午夜视频| 亚洲AV综合色一区二区三区| 国产一区二区免费视频| 美女啪啪一区二区三区| 合区精品久久久中文字幕一区| 无码日韩人妻AV一区二区三区| 欧洲精品一区二区三区在线观看| 日本v片免费一区二区三区| 日韩一区二区三区免费体验| 韩国资源视频一区二区三区| 国产亚洲福利精品一区二区| 午夜一区二区在线观看| 国产MD视频一区二区三区| 亚洲国产一区二区三区| 国产精品无码不卡一区二区三区 | 国产精品va一区二区三区| 国产无人区一区二区三区| 日本v片免费一区二区三区 | 日韩精品一区二区三区四区| 久久久久久综合一区中文字幕| 国产精品夜色一区二区三区| 夜精品a一区二区三区| 区三区激情福利综合中文字幕在线一区亚洲视频1 |