抹灰查詢

考慮下面的代碼：抹灰查詢

<div style="width:250px;background:red;"> 
    line1 
    <div style="width:auto;background:green;margin-left:10%;margin-right:10%;" > 
    line2 
    </div> 
</div>

及其結果： enter image description here

以上是絕對可以理解我。

現在，這個代碼：

<div style="width:250px;background:red;"> 
line1 
<div style="float:left;width:auto;background:green;margin-left:10%;margin-right:10%;"> 
    line2 
</div> 
</div>

及其結果： enter image description here

我無法解釋兩件事情。第一個：爲什麼內部的股利改變立場？由於浮動不會影響以前的元素，我希望文本「line1」不會換行到綠色div旁邊！第二個：浮動屬性不接受寬度：自動？爲什麼綠色div縮小？

謝謝

來源

2014-05-09 Unknown developer

甲文檔流程指嵌段元件在垂直方向上呈現，內聯元素在水平方向上呈現，而在遇到它們的順序渲染的所有元素。

摘自w3.org - Floats and clearing

<p>This is a very simple document.</p> 
<p>It consists of <em>two</em> paragraphs.</p>

這裏是與覆蓋該文檔的屏幕截圖，其示出了由p元件和由em元件產生的內框生成的兩個塊盒。

enter image description here

浮法塗改該元素是在文檔流呈現的方式。與絕對位置不同，它不會完全從流中移除元素。它基本上使它與內聯塊元素相似，但需要注意的是，它將盡可能地沿所指示的方向「漂浮」其他非浮動元素。

因此，line2元素不會導致換行，並且優先於line1進行渲染。因爲這個，你最終會在line1之前出現一個line2元素。

至於寬度，由於line2現在是inline-ish，所以它的寬度只是包含內容。當使用auto時，它對此沒有影響。

但是，有一個警告。如果寬度：200px;在line2上使用，然後這將使浮動放置在下一行，因爲這是「儘可能離開」，因爲沒有足夠的空間來浮動前一行中的200px元素（+ 20％的邊距）。由於line1已經存在，並且包含塊（50px）的邊距爲200px和20％，因此line2將無法放在同一行上。

enter image description here
fiddle for image

來源

2014-05-09 22:03:27

糟糕的答案！非常感謝。 –

但是，我認爲你犯了一個小錯誤。因爲計算指的是包含塊的寬度（250px寬），所以20％邊距的正確數字是50px而不是40px。我是對還是錯？ –

@ILIAS - 對於250像素的寬度，這是正確的，但是我指的是最後一個場景，其中line2的寬度爲200px。這是計算的基礎，所以200px的20％是40px :) –

回答

相關問題