Q

CSS的float弊端

2013-05-10 67 views 0 likes

0

這裏去代碼：CSS的float弊端

<style> 
    .thumbnail 
    { 
    float:left; 
    width:110px; 
    height:90px; 
    margin:5px; 
    } 
</style> 
    <body> 
    <img src="klematis_small.jpg" style="width:107px; height:140px"> 
    <img class="thumbnail" src="klematis_small.jpg" style="width:107px; height:150px">

混亂的是爲什麼這是第一img.If眼前飄浮appering第二張圖片我們把第一張圖片，以第二的img一切正常。

2013-05-10 Maizere Pathak.Nepal

A

回答

1

浮動元素被取出normal document flow:

的由於浮子是不是在流程中，浮動框之前和之後創建的非定位塊盒流動垂直彷彿浮子不存在。但是，根據需要縮短浮動框旁邊創建的當前和隨後的線框，以便爲浮動框的邊距框騰出空間。

只有行框（內聯格式化上下文中的元素）關於浮動，通常這是以文本的形式。還記得，浮子將始終被定位在頂部（在堆疊順序），在流塊級元素碰撞時，卻會出現後面所有行框..

浮子的內容如同浮動產生新的堆疊上下文一樣堆疊，除了實際上創建新的堆疊上下文的任何定位元素和元素參與浮動的父堆積上下文。浮標可以在正常流程中與其他框重疊（例如，當浮標旁邊的正常流動框具有負邊界時）。發生這種情況時，浮動將呈現在未定位的流入塊前面，但在流入內聯後面。

上的Visual Formatting Model彩車的部分是有益的，如果你有興趣學習的具體

^{參考文獻：Section 9.4, Floats, CSS 2.1 Specification}

2013-05-10 20:31:02 Adrift

+0

請問你可以用一個例子來解釋一下，_when與流動塊級別的元素碰撞，但它會出現在所有行框後面。 – dkjain 2016-01-11 08:56:49

0

是。這是正常的和預期的。如果你想要第一個，你需要把它們都浮起來。

2013-05-10 20:32:50

1

您從W3Schools複製的例子，但沒讀：

元素如何浮法元素水平浮動，這意味着元素只能浮動左或右，不是向上或向下。

浮動元素將盡可能向左或向右移動。通常這意味着一直到包含元素的左側或右側。

2013-05-10 20:33:30 WooCaSh

+0

大聲笑謝謝你的信息 – 2013-05-10 20:34:33

+0

如果我的答案有幫助，請將其標爲好答案。謝謝。 – WooCaSh 2013-05-17 19:06:00

+0

這是不是意味着它會採取任何其他元素的位置 – 2013-05-18 15:56:10

0

我不會使用浮動，只需使用display：inline-block;它將按照與編寫代碼相同的順序顯示您的項目。

2013-05-10 20:42:21 Cam

相關問題