在用HTML+css寫頁面中遇到的問題

來源:互聯網
上載者:User

標籤:box      size   str   oat   屬性   高度   image   常用   

一、清除浮動。

(1)verflow:hidden;這個CSS樣式是大家常用到的CSS樣式,但是大多數人對這個樣式的理解僅僅局限於隱藏溢出,而對於清除浮動這個含義不是很 瞭解。一提到清除浮動,我們就會想到另外一個CSS樣式:clear:both,我相信對於這個屬性的理解大家都不成問題的。

    verflow:hidden清除浮動,例如如下:(樣式box div是樣式content div的父元素)

           .box{ 
          background:#000; 
          width:300px;
          overflow:hidden;
         } 
        .content {         
          float:left; 
          width:200px; 
          height:200px; 
          background:red;
         }

() box設定overflow:hidden,清除content的浮動,所以box的高度隨content的高度變化而變化。如果box沒有設定overflow:hidden,那麼content的高將影響不了box的高。

 

(2)clear:both;該屬性的值指出了不允許有浮動物件的邊。這個屬性是用來控制float屬性在文檔流的物理位置的。

當屬性設定float(浮動)時,其所在的物理位置已經脫離文檔流了,但是大多時候我們希望文檔流能識別float(浮動),或者是希望float(浮動)後面的元素不被float(浮動)所影響,這個時候我們就需要用clear:both;來清除。

樣式      <style>

.p1{
float:left;
width:200px;
background: darkgoldenrod;
}
.p2{
float:left;
width:400px;
background: darkmagenta;
}
.p3{
clear: both;
}

</style>

HTML中的代碼

<p class="p1">這個是第1列,</p>
<p class="p2">這個是第2列,</p>
<p class="p3">這個是第3列。</p>

如果不給第三列clear:both,那麼第三列就會在第二列的後面,加了之後,在第二列的下面。

在用HTML+css寫頁面中遇到的問題

相關文章

聯繫我們

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

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

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.