CSS浮動屬性意外行爲

所以我正在檢查CSS浮動屬性，當我注意到一個奇怪的行爲，我不知道它的原因。CSS浮動屬性意外行爲

這是a link代碼和四個div的預覽，前兩個浮動右和左，第三和第四隻是一個普通的div。

我知道第三個div會被第二個div重疊，但是我不明白爲什麼第三個div的內容會向下移動，它不應該隱藏在第二個div的後面嗎？

P.S我知道問題可以使用第三個div的clear屬性來解決，但是我更關心這種行爲背後的原因。

代碼：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
aside, article, section, header, footer, nav { 
    display: block; 
} 
html, body { 
    margin: 0; 
    padding: 0; 
} 
html { 
    background: #ccc; 
} 
body { 
    width: 600px; 
    background: #fff; 
    margin: 2em auto 2em; 
    font: 100% Arial, Helvetica, sans-serif; 
} 
div { 
    margin-bottom: 1em; 
    margin-right: 2em; 
    width: 85px; 
    height: 50px; 
    border: 1px solid #000; 
    padding: 25px; 
} 
/*add styles here*/ 
.element1 { 
    background: rgb(26, 78, 175); 
    float:right; 
    color:white; 
} 
.element2 { 
    background: rgb(85, 66, 54); 
    float:left; 
    color:white; 
} 
.element3 { 
    background: rgb(247,120,37); 
} 
.element4 { 
    background: rgb(211, 206, 61); 
} 

? 
</style> 
</head> 
<body> 
    <div class="element1">Element 1 floated right</div> 
    <div class="element2">Element 2 floated left</div> 
    <div class="element3">Element 3 normal flow</div> 
    <div class="element4">Element 4 normal flow</div> 
</body> 
</html>

來源

2012-09-16 Mohammed Ibrahim

我發現內this document的回答我的問題。從文檔

引用：

由於浮子是不是在流程中，浮動框之前和之後創建的非定位塊盒垂直流動彷彿浮子不存在。 但是，爲了爲浮動框創造空間，縮短了在浮動框旁創建的線框。浮動框之前的當前行中的任何內容都將在浮動框另一側的第一條可用行中重新排列。

所以基本上文件說的是，浮動元素可以重疊的盒模型添加到文檔的正常流動的元素，但它不能覆蓋其內容;換句話說，重疊元素的內容限於非重疊空間。

P.S.到目前爲止，我已經提取浮動行爲，例如：

部件1：浮動元素

元素2：非定位元素

1，繪製元素2的盒模型。

2-繪製Element1的框模型及其內容。

3 - 如果元素2仍具有非重疊空間，則開始使用其內容填充它。

4如果空間無法容納整個內容，請在Element2框模型下開始追加它們。

希望這會有所幫助。

Btw，感謝和+1對所有誰貢獻的問題。

來源

2012-09-17 06:34:37

你需要清除浮動，如果不是元素壓低所有其他元素

<style> 
    .clear { 
     clear:both; 
    } 
    </style> 

    <div class="element1">Element 1 floated right</div> 
    <div class="element2">Element 2 floated left</div> 
    <p class='clear'></p> <!-- Usualy I use a div but you slyle all !--> 
    <div class="element3">Element 3 normal flow</div> 
    <div class="element4">Element 4 normal flow</div>

來源

2012-09-16 20:47:52 adrianes

他說他對FLOAT行爲很感興趣，他知道如何解決這個問題。請再讀一遍他的問題。 – 2012-09-16 20:54:51

@VictorBarbu我在W3C的Visual形式模型文檔中找到了對該行爲的解釋。如果有興趣可以閱讀更多[這裏]（http://stackoverflow.com/a/12454170/910730） –

其實當我們使用浮動元素，我們要經常清除否則其他元素將重疊到浮動元素中，因爲它們在浮動元素之後不會被清除，就像在您的示例中發生的那樣，所以我清除了您的.element3類。

.element3 { 
    background: rgb(247,120,37); 
    clear:both; 
}

看到演示： - http://jsfiddle.net/ZpQuu/6/

來源

2012-09-17 05:21:39

CSS浮動屬性意外行爲

回答

相關問題