標籤: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寫頁面中遇到的問題