深入分析網頁設定中css float屬性

來源:互聯網
上載者:User

float 屬性的定義:使元素在哪個方向浮動

預設值為:none

注意:浮動元素會產生一個塊級框,而不論它本身是何種元素

一、float文法   -   TOP

Float常跟屬性值left、right、none
Float:none 不使用浮動
Float:left 靠左浮動
Float:right 靠右浮動
float文法:

float : none | left |right

參數值:
none :  對象不浮動
left :  對象浮在左邊
right :  對象浮在右邊

HTML代碼:

 代碼如下 複製代碼

<body>
     <div class="main">
  <div class="d" id="d1">框1</div>
  <div class="d" id="d2">框2</div>
   <div class="d" id="d3">框3</div>
  <div class="d" id="d4">框4</div> 
     </div>
</body>

 1,當兄弟元素全為浮動元素時其父類元素在沒有自訂寬高時其高度將為零

css樣式:

 代碼如下 複製代碼
.main {
      border: 1px solid ;
   }
 .d {
      border: 1px solid red;
      width: 50px;
      height: 50px;
      float: left;
   }

 

顯示效果:

2,浮動元素會在一行之內空間不夠多餘的浮動元素會跳至下一行

css樣式:

 代碼如下 複製代碼
 .main {
      border: 1px solid ;
      width:130px;
   }
 .d {
      border: 1px solid red;
      width: 50px;
      height: 50px;
      float: left;
   }

 

顯示效果:

3,浮動元素會脫離文字資料流,其參照父類元素

ccs樣式:

 代碼如下 複製代碼

  #d1{
     float:left;
   }

 顯示:

ss浮動總結   -   TOP

我們要區別與文字內容靠左( text-align:left)靠右( text-align:right)樣式,浮動只針對html標籤設定靠左靠右浮動樣式。float浮動樣式沒有靠中(浮動置中)的樣式,如果需要讓標籤對象置中我們在css布局置中相關文字給大家詳細講解介紹(css margin)。這裡記住浮動靠右使用float:right,浮動靠左使用float:left樣式即可。

 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.