整合營銷服務商

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

          免費咨詢熱線:

          前端入門-浮動float

          篇文章講了文檔流相關知識,網頁中html元素會按照標準規則排列,塊級元素從上到下,行內元素從左到右排列。如果這時想讓一個元素排到右側,怎么辦?

          這時就可以使用浮動float 和 定位 position ,今天主要介紹float,關于float屬性稍微有點難理解,它是把雙刃刀,會用的會做出各種很好的效果,不會用的反而問題越來越多。

          float 屬性有以下幾個值:

          1. none —— 沒有浮動(默認值)。
          2. left —— 左浮動。
          3. right —— 右浮動。
          4. inherit —— 繼承父元素的float。

          如下示例:

          左浮動

          右浮動

          這里注意:右浮動是從右到左排列元素,子元素的html實際位置是按照,子元素1>子元素2>子元素3的順序,但是右浮動的顯示效果是子元素1在最右邊,依次向左,正好和元素實際位置相反。

          float 浮動可歸納以下幾點:

          1. 浮動本意是什么?
          2. 使元素脫離文檔流,但不脫離文本流。
          3. 會使父元素高度塌陷。
          4. 浮動和行內元素區別。
          5. 浮動的破壞性,影響相鄰元素的布局。
          6. 如何清除浮動。

          浮動本意是什么?

          浮動float最初設計的目的是實現文字環繞的功能,如下圖所示:

          沒有使用浮動:

          使用浮動后:

          從上圖看到圖片脫離了文檔流浮動到左邊,但是沒有脫離文本流,文本環繞著圖片。

          文字環繞效果除了float屬性能夠實現,再找不到其它方法,這就是它的真正用處,但是在早期網頁制作中,它被用來實現各種布局,比如水平的菜單,或者左邊圖片右邊文字等等效果。但是在使用float的過程中出現了各種問題,比如父元素高度塌陷,破壞相鄰元素的布局等等。

          使父元素高度塌陷

          當一個元素里面的子元素使用了float浮動,其父元素如果沒有設置高度或者高度小于浮動元素的高度時,父元素就會出現如下示例:

          沒有使用浮動:

          使用浮動后:

          如上圖紅色邊框就是父元素,沒使用float前,它的高度被子元素撐開。當使用float后可以看到父元素的高度變成0了,這就是高度塌陷。

          浮動和行內元素區別

          float 浮動可以使一個行內元素變成塊級元素,準確地說應該更像是 inline-block 行內塊級元素,但又不完全一樣。看下如下示例:

          沒有使用float前:

          子元素是一個塊級元素,占滿了一行,其寬度默認為100%。

          使用float后:

          可以看到,子元素的寬度變了,等于其內容的實際寬度。和行內元素一樣,但是不同之處就是浮動可以使元素浮動到左側或者右側,如上圖。行內元素則不行,只能從左到右排列,這就是float的特殊之處,所以常常被用來制作一些復雜的布局效果。

          浮動的破壞性

          float雖然能夠解決一些布局的問題,但是用不好就會造成頁面布局混亂,出現各種奇怪的問題,如下示例:

          沒有使用float前:

          如上圖,所有元素從上到下排列,父級那個元素和上下相鄰。

          使用float后:

          此時可以看到,父級那個元素下面的相鄰元素2,由于父級元素高度塌陷,也向上移動位置,這樣導致浮動元素就會覆蓋下面的相鄰元素2,這不是我們期望的結果。

          怎么解決了?要么給父級元素設置一個固定的高度,這個高度要大于浮動元素的高度,或者使用clear屬性清除浮動。

          如何清除浮動

          為了解決浮動造成的破壞,此時就要使用各種方法來清除浮動,常見的有以下三種方法:

          1、給浮動元素父級元素使用 overflow

          如下示例:

          overflow:hidden;
          zoom:1;

          可以看到父級元素的高度不塌陷了,被子元素撐高了。由于沒有設置高度,其高度等于子元素的高度。

          overflow 的缺點就是,當子元素寬度和高度超出父級時,會隱藏部分子元素內容。

          在早期為了兼容ie瀏覽器,除了使用overflow:hidden;還要加上zoom:1;否則會出現一些怪異的現象。

          2、使用clear屬性

          clear 屬性用來是一個元素不受相鄰浮動元素的影響,它有 both (清除左右浮動),left(清除左浮動),right(清除右浮動),none (允許其相鄰元素有浮動,默認值)。

          如下示例:

          clear:both;

          看到這里和使用overflow的效果一樣,不同之處是,要額外在父級元素中增加一個標簽來做清除浮動。這也就是它的最大缺點。

          3、使用 after偽類

          使用after偽類,可以不用額外增加一個多余的標簽,如下示例:

          .fix:after{
              display:block; 
              content:''; 
              clear:both; 
              line-height:0; 
          }

          綜上所述,方法3是最后的。以上三種方法都是解決父級高度塌陷問題,還有一種情況就是給相鄰元素2設置clear 屬性,會是什么效果?

          如下示例:

          <div class="d2" style="clear:both;">
                  相鄰元素2
            </div>

          如上圖看到相鄰元素2,恢復到默認文檔流中的位置,但是發現父級元素的高度仍然塌陷,這種清除浮動的情況是比較特殊的,和之前的不一樣。

          總結

          float 是不是有點難懂,沒辦法浮動的初衷就不是用來布局的,被玩壞了。但是不要緊,float在如今網頁布局中已經很少使用,css3已經有了新的方案,比如flex等。所以關于本篇了解下就可以了,不需要完全掌握。

          感謝閱讀,歡迎指出錯誤或者補充。

          上篇:前端入門——網頁中的文檔流和布局

          天教大家制作一個淘寶首頁右側浮動的導航話不多說,看圖片

          打開編輯工具Editplus新建一個html網頁

          建好后就開始制作

          在body里添加下面內容

          <div class="dh">

          <div class="tp"></div>

          <div class="a"><a href="#">愛逛好貨</a></div>

          <div class="b"><a href="#">好點直播</a></div>

          <div class="c"><a href="#">品質特色</a></div>

          <div class="d"><a href="#">實惠熱賣</a></div>

          <div class="e"><a href="#">猜你喜歡</a></div>

          <div class="f"><a href="#">反饋</a></div>

          <div class="g"><a href="#">暴恐舉報</a></div>

          </div>

          然后在title下面添加css樣式

          添加好后按鍵盤上的ctrl+s建保存,

          保存好后鼠標雙擊打開就OK啦!

          如果需要源碼的可以關注我后私信我,也可以加咱們的交流群309073798,每天都會分享最新的網站前端技術

          歡迎大家轉載收藏,最后又不對的地方大家可以在留言區吐槽

          們經常在一些開源的項目(例如:ecmall、wordpress)中看到類似下面的代碼:

          <div class="main">
          <div class="nav">xxxx</div>
          <div class="">yyyyy</div> <p class="clear"></p></div>

          注意上面的代碼中,加紅的代碼中類clear的css樣式內容為clear:both;而<p>與</p>之間并沒有內容。那么,添加“不必要”的代碼,有什么用呢?看下面的例子。

          假如有一個圖片,你希望讓它浮動到一個文本塊的左邊。你想將這個圖片和文本包含在另一個具有背景顏色和邊框的元素中。你可能會編寫下面這樣的代碼:

          .news{
          background-color:gray;
          border:solid 1px black;
          }
          .news img{
          float:left;
          }
          .news p{
          float:right;
          }
          <div class="news">
          <img src="/img/news-pic.jpg" alt="my picture" />
          <p>some text</p>
          </div>

          但是,因為浮動元素脫離了文檔流,所以包圍圖片和文本的div不占據空間。如何讓包圍元素在視覺上包圍浮動元素呢?需要在這個元素中的某個地方應用clear。只可惜這個示例中沒有現有的元素可以清理,所以需要在最后一個段落下面添加一個空元素并且清理它。

          因為浮動元素不占據空間,所以容器元素不包圍它們。添加一個進行清理的空元素可以迫使容器元素包圍浮動元素

          .news{
          background-color:gray;
          border:solid 1px black;
          }
          .news img{
          float:left;
          }
          .news p{
          float:right;
          }
          <div class="news">
          <img src="/img/news-pic.jpg" alt="my picture" />
          <p>some text</p>
          <br class="clear" />
          </div>

          這會實現我們希望的效果,但是要添加不必要的代碼。常常有現成的元素可以應用clear,但是有時候為了布局不得不忍受巨大痛苦添加無意義的標記。


          主站蜘蛛池模板: 琪琪see色原网一区二区| 成人免费一区二区三区在线观看| 精品无码一区二区三区爱欲| 日韩在线一区二区三区视频| 久久精品岛国av一区二区无码| 福利一区二区视频| 亚洲性无码一区二区三区| 国产suv精品一区二区33| 国产精品亚洲综合一区| 蜜桃视频一区二区三区| 国产一区在线播放| 国产综合视频在线观看一区| 丝袜美腿一区二区三区| 男人的天堂av亚洲一区2区| 亚洲一区欧洲一区| 亚洲欧美一区二区三区日产| 狠狠色综合一区二区| 亚洲日本va一区二区三区| 日本一区二区三区免费高清| 海角国精产品一区一区三区糖心| 人妻精品无码一区二区三区 | 久久人妻av一区二区软件| 丝袜人妻一区二区三区| 中日av乱码一区二区三区乱码| 中文乱码精品一区二区三区| 伊人久久大香线蕉av一区| 国产精品美女一区二区视频| 亚洲日本一区二区| av无码免费一区二区三区| 欧美一区内射最近更新| 精品女同一区二区三区免费播放| 精品不卡一区中文字幕| 中文字幕一区日韩在线视频| 蜜桃传媒视频麻豆第一区| 精品熟人妻一区二区三区四区不卡 | 亚洲国产系列一区二区三区| 无码少妇A片一区二区三区| 亚洲一区二区三区高清不卡| 精品国产一区二区三区| 精品国产一区二区三区久久蜜臀 | 久久精品国产一区二区三区|