奇怪的浮動清除問題

我有一個漂浮的div的左菜單容器列和全寬非浮動div與內容區域的左邊距的漂亮的基本佈局。奇怪的浮動清除問題

當我將浮動的div放入內容區域時，它們浮動並按預期放置，直到我清除浮動。

浮動的下一行則似乎沒有直接前面的線之下，但下降的菜單欄

的底部之下一路正如你可以看到下面有什麼特別之處佈局，但浮動問題是驅使我堅果:)

<div style="float: left; width: 200px; height: 200px; border: 1px solid red;"> 
    floated left div 
</div> 
<div style="margin-left: 210px; border: 1px solid blue;"> 
    non floated right div containing floated divs inside<br /> 
    <div style="float: left; border: 1px solid green;">1st float</div> 
    <div style="float: left; border: 1px solid green;">2nd float</div> 
    <div style="float: left; border: 1px solid green;">3rd float</div> 
    <br style="clear: left;" /> 
    <div style="float: left; border: 1px solid green;">1st float</div> 
    <div style="float: left; border: 1px solid green;">2nd float</div> 
    <div style="float: left; border: 1px solid green;">3rd float</div> 
    <br style="clear: left;" /> 
    <div style="float: left; border: 1px solid green;">1st float</div> 
    <div style="float: left; border: 1px solid green;">2nd float</div> 
    <div style="float: left; border: 1px solid green;">3rd float</div> 
    <br style="clear: left;" /> 
</div>

我做了一個jsfiddle來演示這個問題; http://jsfiddle.net/jP6e9/

來源

2013-06-12 Daemonic

如果容器沒有引入新的塊格式化上下文，則「clear」不允許將較大的框左移。 http://jsfiddle.net/ExplosionPIlls/jP6e9/3/ –

clear屬性按給定方向將元素推過float。由於clear: left，這些元素被推下大浮動框。「清除」屬性不考慮元素本身或其他block formatting contexts內的浮動元素。

您可以輕鬆地對更廣泛的箱設置overflow: hidden創建新的塊格式化的內容：http://jsfiddle.net/ExplosionPIlls/jP6e9/7/

來源

2013-06-12 16:13:28

非常感謝你，我一直認爲溢出：汽車會添加滾動條，但我想那只是如果高度是設置和內容太長:) – Daemonic

這是因爲你創建了一個浮球隨欄div，但沒有浮動主要div。只需在您的浮動主要div，刪除大量margin-left，並與一些更保守的替換：

<div style="margin-left: 20px; border: 1px solid blue; float: left">

最後，明確是浮動：

<div style="clear: left"></div>

更新時間：

http://jsfiddle.net/jP6e9/1/

來源

2013-06-12 16:07:44 blend

對不起，我應該說，內容的div需要剩餘的屏幕空間的其餘部分的全部寬度，否則我通常會根據您的更新 – Daemonic

它確實：http://jsfiddle.net/jP6e9/6/ - 只需添加更多內容：） – blend

這是那些古怪的情景之一你需要使用overflow:auto來獲得你想要的東西。

<div style="margin-left: 210px; border: 1px solid blue;overflow:auto;">

jsFiddle example

您需要通過與float屬性結合使用overflow屬性觸發block formatting context。

另請參閱：http://www.w3.org/TR/CSS21/visuren.html#block-formatting,http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/和How does the CSS Block Formatting Context work?關於塊格式上下文的一些較好的信息。

來源

2013-06-12 16:12:59 j08691

非常感謝你，我一直認爲溢出：汽車會添加滾動條，但我想那只是如果高度設置和內容太長:) – Daemonic

對不起，我不能給你的答案都是 – Daemonic

可以使用顯示：右DIV表單元格，像這樣：

<div class="left">floated left div</div> 
<div class="right"> 
    non floated right div containing floated divs inside <br /> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <br style="clear: left;" /> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <br style="clear: left;" /> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <br style="clear: left;" /> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <br style="clear: left;" /> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <br style="clear: left;" /> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <div class="floatItem"> float</div> 
    <br style="clear: left;" /> 
</div>

的css code：

.left { 
    float: left; 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
    margin-right: 10px; 
} 
.right { 
    border: 1px solid blue; 
    display: table-cell; 
} 
.floatItem { 
    float: left; 
    border: 1px solid green; 
}

請查看deom。

來源

2013-06-12 16:34:35 Airen

浮子無法阻止一個元素停止纏繞相鄰的浮動clild。默認情況下，所有元素都不會浮動。清除兩個停止元素，以便從左側或右側環繞任何浮動子項。有關更多詳細信息和實例，請訪問我的教程，
http://tutorial.techaltum.com/css_float.html。

來源

2014-03-27 06:44:58

奇怪的浮動清除問題

回答

相關問題