• <var id="gzb7d"><strong id="gzb7d"></strong></var>
    <td id="gzb7d"></td>

    1. <acronym id="gzb7d"></acronym>
      瀏覽器部落:綠色安全純凈官方版,體驗當今速度最快的瀏覽器!

      float是啥?float屬性詳細說明

      時間:2020-11-21作者:未知來源:瀏覽器部落人氣:

      網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。
      float是什么?為什么要使用float?本篇文章就給大家介紹float是什么,讓大家了解浮動對布局的作用,清除浮動的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有所幫助。

      首先我們來了解一下float是什么?

      float是css的一個定位屬性。要了解它的目的和來源,我們可以看一下印刷設計。在打印布局中,可以將圖像設置到頁面中,使得文本根據需要包裹它們。這通常被恰當地稱為“文本環繞”。這是一個例子:

      1.png

      在頁面布局程序中,可以告知保存文本的框以遵循文本環繞,或忽略它。忽略文本環繞將允許單詞在圖像上方流動,就像它甚至不存在一樣。這是該圖像是頁面流的一部分(或不是)的區別。網頁設計非常相似。

      2.png

      在Web設計中,應用了CSS 浮動屬性的頁面元素就像打印布局中文本圍繞它們的圖像一樣。浮動元素仍然是網頁流的一部分。這與使用絕對定位的頁面元素明顯不同。絕對定位的頁面元素將從網頁流中被刪除,就像打印布局中的文本框被告知忽略頁面換行一樣。絕對定位的頁面元素不會影響其他元素的位置,其他元素也不會影響它們,無論它們是否相互接觸。

      使用CSS在元素上設置float會發生如下:

      .demo {
        float: right;			
      }

      float屬性有四個有效值,分別為:

      left :設置元素向左浮動;

      right :設置元素向右浮動;

      none :默認值,設置元素不浮動;

      inherit :規定應該從父元素繼承 float 屬性的值。

      為什么要使用float?

      3.png

      浮動也有助于在較小區域內布局。以網頁的這個小區域為例。如果我們對我們的小頭像圖像使用float,當該圖像改變大小時,框中的文本將重排以適應:

      4.png

      使用容器上的相對定位和化身上的絕對定位也可以實現相同的布局。通過這種方式,文本將不受頭像的影響,并且無法在大小更改時重排。

      5.png

      為什么要清除浮動?

      float(浮動)可以讓元素從正常流中移除,并且其他元素將顯示在它旁邊,因此如果我們想要阻止后續元素向上移動(如下圖,阻止footer的上移),這就需要清除它。我們需要清除頁腳(footer)的浮動,以確保它位于兩個浮動列的下方。要解決此問題,就需要通過clear屬性來實現了。

      6.png

      .footer {
        clear: both;
      }

      7.png

      clear屬性有五個有效值,分別為:

      left:清除在左側浮動的元素。

      right:清除在右側浮動的元素。

      both:清除左右兩側均浮動的元素。

      none:默認值,允許浮動元素出現在兩側。 除非從級聯中刪除clear值,否則通常是不必要的值。

      inherit:設置規定應該從父元素繼承 clear 屬性的值。

      總結:以上就是本篇文章有關float相關問題的全部內容,希望能對大家的學習有所幫助。

      以上就是float是什么?float屬性詳解的詳細內容,更多請關注php中文網其它相關文章!


      網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




      關鍵詞:float是啥?float屬性詳細說明




      Copyright © 2012-2018 瀏覽器部落(http://www.atelierescobar.com) .All Rights Reserved 網站地圖 友情鏈接

      免責聲明:本站資源均來自互聯網收集 如有侵犯到您利益的地方請及時聯系管理刪除,敬請見諒!

      QQ:1006262270   郵箱:kfyvi376850063@126.com   手機版 

      国产乱子伦漫画,猫咪www免费人成在线观看,国产真实哺乳吃奶在线观看,超乳专区爆乳国产