深入分析網頁設定中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樣式即可。

 

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。