整合營銷服務商

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

          免費咨詢熱線:

          HTML解決浮動塌陷的方法

          HTML解決浮動塌陷的方法

          么是浮動塌陷?

          當子元素設置浮動時,父元素中所有孩子盒子都是float,則父容器的高度為0。

          1.在父親盒子中的最下邊添加一個空div盒子,并設置clear為相應的值,如果不清除塌陷,那么父元素高度為0,給ul設置高度就沒有效果。

          clear常見取值如下:

          left:清除左側浮動引起的塌陷;

          right:清除右側浮動引起的塌陷;

          both:清除左右兩側浮動引起的塌陷。

          2.

          天小編為大家介紹五種css樣式布局以及內服源代碼作為介紹,采用的方式是行內級樣式(就是將css樣式代碼與html寫在一起)

          已知布局元素的高度,寫出三欄布局,要求左欄、右欄寬度各為300px,中間自適應。

          一、浮動布局

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8" />

          <title>浮動布局</title>

          <style type="text/css">

          .wrap1 div{

          min-height: 200px;

          }

          .wrap1 .left{

          float: left;

          width: 300px;

          background: red;

          }

          .wrap1 .right{

          float: right;

          width: 300px;

          background: blue;

          }

          .wrap1 .center{

          background: pink;

          }

          </style>

          </head>

          <body>

          <div class="wrap1">

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

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

          <div class="center">

          浮動布局

          </div>

          </div>

          </body>

          </html>

          浮動布局的兼容性比較好,但是浮動帶來的影響比較多,頁面寬度不夠的時候會影響布局。

          二、絕對定位布局

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8" />

          <title>絕對定位布局</title>

          <style type="text/css">

          .wrap2 div{

          position: absolute;

          min-height: 200px;

          }

          .wrap2 .left{

          left: 0;

          width: 300px;

          background: red;

          }

          .wrap2 .right{

          right: 0;

          width: 300px;

          background: blue;

          }

          .wrap2 .center{

          left: 300px;

          right: 300px;

          background: pink;

          }

          </style>

          </head>

          <body>

          <div class="wrap2 wrap">

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

          <div class="center">

          絕對定位布局

          </div>

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

          </div>

          </body>

          </html>

          絕對定位布局快捷,但是有效性比較差,因為脫離了文檔流。

          三、flex布局

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8" />

          <title>flex布局</title>

          <style type="text/css">

          .wrap3{

          display: flex;

          min-height: 200px;

          }

          .wrap3 .left{

          flex-basis: 300px;

          background: red;

          }

          .wrap3 .right{

          flex-basis: 300px;

          background: blue;

          }

          .wrap3 .center{

          flex: 1;

          background: pink;

          }

          </style>

          </head>

          <body>

          <div class="wrap3 wrap">

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

          <div class="center">

          flex布局

          </div>

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

          </div>

          </body>

          </html>

          自適應好,高度能夠自動撐開

          四、table-cell表格布局

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8" />

          <title>table-cell表格布局</title>

          <style type="text/css">

          .wrap4{

          display: table;

          width: 100%;

          height: 200px;

          }

          .wrap4>div{

          display: table-cell;

          }

          .wrap4 .left{

          width: 300px;

          background: red;

          }

          .wrap4 .right{

          width: 300px;

          background: blue;

          }

          .wrap4 .center{

          background: pink;

          }

          </style>

          </head>

          <body>

          <div class="wrap4 wrap">

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

          <div class="center">

          表格布局

          </div>

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

          </div>

          </body>

          </html>

          兼容性好,但是有時候不能固定高度,因為會被內容撐高。

          五、網格布局

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8" />

          <title>網格布局</title>

          <style type="text/css">

          .wrap5{

          display: grid;

          width: 100%;

          grid-template-rows: 200px;

          grid-template-columns: 300px auto 300px;

          }

          .wrap5 .left{

          background: red;

          }

          .wrap5 .right{

          background: blue;

          }

          .wrap5 .center{

          background: pink;

          }

          </style>

          </head>

          <body>

          <div class="wrap5 wrap">

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

          <div class="center">

          網格布局

          </div>

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

          </div>

          </body>

          </html>

          希望大家可以一直關注我,支持我!感謝!!!

          篇文章我們說了元素的浮動,本篇文章主要介紹下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種方式。


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


          主站蜘蛛池模板: 小泽玛丽无码视频一区| 性色av无码免费一区二区三区 | 一区二区三区视频网站| 成人区精品人妻一区二区不卡| 手机福利视频一区二区| 日韩在线不卡免费视频一区| 精品福利一区二区三区精品国产第一国产综合精品 | 精品人妻无码一区二区三区蜜桃一| 成人无码AV一区二区| 成人国产精品一区二区网站| 精品国产AV无码一区二区三区| 亚洲国产成人一区二区精品区| 中文字幕国产一区| 国产免费播放一区二区| 亚洲国产综合精品一区在线播放| 国产精品一区二区资源| 久久精品成人一区二区三区| 亚洲欧美日韩国产精品一区| 无码乱码av天堂一区二区| 精品无人区一区二区三区| 久久国产精品无码一区二区三区 | 在线免费一区二区| 免费看无码自慰一区二区| 国产精品久久久久一区二区三区| 中文字幕一区二区三区精彩视频| 亚洲AV无码一区东京热| 无码人妻一区二区三区在线视频| 亚洲日本一区二区三区在线| 中文字幕无码免费久久9一区9| 亚洲一区二区高清| 亚洲色精品vr一区二区三区| 亚洲国产精品无码久久一区二区 | 国产91精品一区| 精品人妻一区二区三区毛片 | 福利一区二区三区视频在线观看| 亚洲一区综合在线播放| 久久久无码一区二区三区| 精品性影院一区二区三区内射| 亚洲一区二区三区无码国产| 国产高清在线精品一区| 中文乱码字幕高清一区二区|