浮動div意外清除前浮動

我有浮動div（可能是愚蠢的）問題。我有每個div大小在屏幕寬度的一到三分之二（在足夠寬的顯示器上）。浮動div意外清除前浮動

我有一個67％的空白左邊浮動，然後一個高33％的div浮動右邊然後一個67％的空白左邊浮動，我預計第三個div立即排在第一個下方，第二個繼續下降到它的權利，因爲在http://jsfiddle.net/BluefireAdz/bqdpfv8w/

<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aaaa00; color: #ffffff; "> 
    &nbsp;<br /> 
</div> 
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aa0000; color: #ffffff; "> 
    &nbsp;<br /> 
</div> 
<div style="padding: 0; margin: 0; border: 0; float: right; width: 33%; background-color: #00aa00; color: #ffffff; "> 
    &nbsp;<br /> 
    &nbsp;<br /> 
    &nbsp;<br /> 
    &nbsp;<br /> 
</div> 
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #0000aa; color: #ffffff; "> 
    &nbsp;<br /> 
</div>

然而，有些東西（可能在我的CSS）被向下推，使其僅開始在第二個div的底部，如清潔製造，我可以http://jsfiddle.net/BluefireAdz/9bho8s5b/（代碼輕鬆製作並仍然存在問題）。

<div class="w67" style="background-color: #aaaa00; "> 
    <h1>Title</h1> 
</div> 
<div class="w67" style="background-color: #aa0000; "> 
    <div class="b3_vplayer"> 
     <div class="embed-container"> 
      <iframe src="http://www.youtube.com/embed/06olHmcJjS0?autoplay=0&amp;rel=0&amp;theme=light" style="border: 0; "></iframe> 
     </div> 
    </div> 
</div> 
<div class="w33" style="background-color: #00aa00; "> 
    <img src="http://www.killersites.com0killerSites/resources/dot_clear.gif" alt="Image 1" style="width: 286px; height: 300px; margin: 1em 0 0 0" /> 
    <img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" alt="Image 2" style="width: 286px; height: 300px; margin: 1em 0 0 0" /> 
</div> 
<div class="w67" style="background-color: #0000aa; "> 
    <p>Lorem Ipsum</p> 
</div>

已經嘗試在Edge，IE和Firefox中獲得相同的結果。

來源

2015-08-21 Adam

看到我更新的提琴在這裏：http://jsfiddle.net/9bho8s5b/1/ 基本上我只是帶來浮動右div的其他divs之前。

<div style="padding: 0; margin: 0; border: 0; float: right; width: 33%; background-color: #00aa00; color: #ffffff; "> 
    &nbsp;<br /> 
    &nbsp;<br /> 
    &nbsp;<br /> 
    &nbsp;<br /> 
</div> 
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aaaa00; color: #ffffff; "> 
    &nbsp;<br /> 
</div> 
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aa0000; color: #ffffff; "> 
    &nbsp;<br /> 
</div> 

<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #0000aa; color: #ffffff;"> 
    &nbsp;<br /> 
</div>

來源

2015-08-21 15:47:29 amespower

當你打了我20秒。大聲笑 –

我會，但我試圖保持內容的秩序（在狹窄的屏幕上，他們都是100％寬度） - 我看不到是什麼讓它的行爲不同於更簡單的示例小提琴我引用 – Adam

使得被設置爲float:right股利首先出現，其次是3 float:left你可以改變你的HTML。

這是fiddle。

來源

2015-08-21 15:47:56

我會，但我試圖保持內容的順序（在較窄的屏幕上它們都是100％的寬度） - 我看不到它的行爲與我引用的更簡單的示例小提琴的行爲不同 – Adam

更新你在這個提琴代碼

http://jsfiddle.net/9bho8s5b/2/

HTML：

<div style="float:left; width: 67%;"> 
    <div style="padding: 0; margin: 0; border: 0; float: left; width: 100%; background-color: #aaaa00; color: #ffffff; "> 
     &nbsp;<br /> 
    </div> 
    <div style="padding: 0; margin: 0; border: 0; float: left; width: 100%; background-color: #aa0000; color: #ffffff; "> 
     &nbsp;<br /> 
    </div>  
</div>

你可以用你的前兩個div的在另一個DIV這是67％的寬度和內部的div這完全是寬度。

來源

2015-08-21 15:48:19 mechanicals

解決了它 - 我實際上並沒有將w33 div浮動到右邊！已將float: right添加到內聯樣式中，現在它們都像希望的那樣漂浮了！

來源

2015-08-21 17:06:34 Adam

浮動div意外清除前浮動

回答

相關問題