Css浮動元素

一位朋友告訴我，正確的浮動元素應該先出現在我的文檔中，但我想我誤解了他想告訴我的內容，我想知道是否有人可以解釋爲什麼如果我同時擁有正確的浮動divs第一個左浮動的div被清除並且在第一個右浮動div後出現在線上？Css浮動元素

這裏是那不執行，因爲我想（2左2右浮動彼此相鄰堆）

<div style="margin-left: auto; margin-right: auto; height: 600px; border: 1px solid black"> 
     <div style="width: 200px; height: 200px; background-color: red; float:right;"></div> 
     <div style="width: 200px; height: 200px; background-color: green; float:right; clear: right"></div> 

     <div style="width: 200px; height: 200px; background-color: yellow; float:left; clear: none"></div> 
     <div style="width: 200px; height: 200px; background-color: purple; float:left; clear: left"></div>     
    </div>

JSfiddle

在這裏，它的作品，因爲我會想，但一個片段我不得不在文檔中四處移動元素的順序：

<div style="margin-left: auto; margin-right: auto; height: 600px; border: 1px solid black"> 
     <div style="width: 200px; height: 200px; background-color: red; float:right;"></div> 
     <div style="width: 200px; height: 200px; background-color: yellow; float:left; clear: none"></div> 

     <div style="width: 200px; height: 200px; background-color: green; float:right; clear: right"></div>   
     <div style="width: 200px; height: 200px; background-color: purple; float:left; clear: left"></div>     
    </div>

JSFiddle

對不起，如果這已經得到了答案，我確定這是一個簡單的問題要回答，我想知道爲什麼我需要正確的浮動，左浮動，但接下來的浮動它似乎不重要，如果正確或左浮動第一。

感謝

來源

2013-03-27 berimbolo

兩個小提琴都顯示相同的結果 – Sharun 2013-03-27 10:38:14

@slacker不知道爲什麼我的不同; – egig 2013-03-27 10:41:16

好的，我一定錯過了一些東西......我只是試着將這些例子粘貼到Firefox 19.0.02中，他們看起來不一樣。編輯我剛剛在IE 8中嘗試，他們看起來一樣。 – berimbolo 2013-03-27 10:42:21

快速教程關於花車

我設置了幾個例子，在http://jsfiddle.net/audetwebdesign/xJSGZ/

我將在每個議論紛紛來說明元素如何佈局提供了小提琴。

在實施例1中，沒有漂浮物，因爲每個都是塊單元，所以正方形堆疊一個在另一個之上。

<h3>Example 1 - no floats</h3> 
<div class="wrapper"> 
     <div class="square" style="background-color: red;"><b>1</b></div> 
     <div class="square" style="background-color: green;"><b>2</b></div> 
     <div class="square" style="background-color: yellow;"><b>3</b></div> 
     <div class="square" style="background-color: purple;"><b>4</b></div> 
</div>

在實例2中，我將div＃2浮動到右邊。在這種情況下，div＃2被從文件流中取出並強制到右側，而div＃3在div＃1之後立即流入。

<h3>Example 2 - float right element #2</h3> 
<div class="wrapper"> 
     <div class="square" style="background-color: red;"><b>1</b></div> 
     <div class="square" style="background-color: green; float: right;"><b>2</b></div> 
     <div class="square" style="background-color: yellow;"><b>3</b></div> 
     <div class="square" style="background-color: purple;"><b>4</b></div> 
</div>

在實例3中，我將div＃4浮動到右邊。由於div＃4在文檔流程中的div＃3之後，因此div＃4位於其自己的行上。

<h3>Example 3 - float right element #2 and #4</h3> 
<div class="wrapper"> 
     <div class="square" style="background-color: red;"><b>1</b></div> 
     <div class="square" style="background-color: green; float: right;"><b>2</b></div> 
     <div class="square" style="background-color: yellow;"><b>3</b></div> 
     <div class="square" style="background-color: purple; float: right;"><b>4</b></div> 
</div>

在實例4中，我將div＃1和＃2浮動到右邊。這兩個都被從流中取出並定位在正確的位置。以下兩個元素，div＃3和＃4流入。我在div＃2中使用clear: right強制它開始一個新行。

<h3>Example 4 - float right element #1 and #2</h3> 
<div class="wrapper"> 
     <div class="square" style="background-color: red; float: right;"><b>1</b></div> 
     <div class="square" style="background-color: green; float: right; clear: right;"><b>2</b></div> 
     <div class="square" style="background-color: yellow;"><b>3</b></div> 
     <div class="square" style="background-color: purple;"><b>4</b></div> 
</div>

但是，要獲得＃1和在左側和＃3，在右側＃4＃2，創建一個內包裝和漂浮的內包裝div的向左和右分別：

<h3>Example 5 - float nested div's</h3> 
<div class="wrapper"> 
    <div class="inner-wrapper" style="float:left;"> 
     <div class="square" style="background-color: red;"><b>1</b></div> 
     <div class="square" style="background-color: green;"><b>2</b></div> 
    </div> 
    <div class="inner-wrapper" style="float: right;"> 
     <div class="square" style="background-color: yellow;"><b>3</b></div> 
     <div class="square" style="background-color: purple;"><b>4</b></div> 
    </div> 
</div>

這些示例讓您瞭解使用浮動元素定位元素的靈活性和侷限性。元素的順序確實有所不同，因爲浮動元素會改變瀏覽器構建頁面佈局的順序。

希望這會有所幫助。

來源

2013-03-27 12:17:27

優秀的解釋，感謝您花時間做到這一點。 – berimbolo 2013-03-27 12:45:15

謝謝！要真正瞭解花車，你需要閱讀Eric Meyer書中的章節。贊成票讚賞。祝一切順利！ – 2013-03-27 12:47:15

不幸的是，我現在不能，但希望別人會這樣做？ – berimbolo 2013-03-27 12:49:35

事實是：該浮動將採取保持距離浮動元素前右它的其餘部分空間的元素。所以，如果不連續放置它們，你不能得到兩個（一個右邊和另一個左邊）的並列。

例如：

你不能div1和div2是水平的，如果相同常漂浮太otherdiv。

<div id="div1"></div> 
<div id="otherdiv"></div> 
<div id="div2"></div>

來源

2013-03-27 11:04:54 egig

好吧我想我明白你在說什麼.. – berimbolo 2013-03-27 11:17:43

糟糕的英語：D ... – egig 2013-03-27 11:22:41

Css浮動元素

回答

相關問題