HTML5中div元素的重疊

我在下面的代碼中製作了3格。第一個有導航元素，第二個有段元素。HTML5中div元素的重疊

如果你運行上面的代碼，你會看到nav 的邊界和兩個部分。我的疑問是第1節左邊的元素應該在導航欄邊界的右側。但由於不存在（通過運行代碼可以看出），這意味着div「a」和「b」重疊。我是否以正確的方式思考？如果我是的權利，爲什麼CSS被設計成這種重疊div的方式。

事實上，這與在CSS中引入div的原因相矛盾。

nav { 
 
    float: left; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
} 
 
section { 
 
    border: 3px solid red; 
 
}

<div class="a"> 
 
    <nav> 
 
    <span>nav</span> 
 
    <ul> 
 
     <li><a target="_blank" href="/default.asp">Home</a> 
 
     </li> 
 
     <li><a target="_blank" href="default.asp">CSS</a> 
 
     </li> 
 
     <li><a target="_blank" href="/html/default.asp">HTML</a> 
 
     </li> 
 
     <li><a target="_blank" href="/js/default.asp">JavaScript</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div> 
 
<div class="b"> 
 
    <section> 
 
    <span>section</span> 
 
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p> 
 
    </section> 
 
</div> 
 
<div class="c"> 
 
    <section> 
 
    <span>section</span> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce 
 
     luctus vestibulum augue ut aliquet.</p> 
 
    </section> 
 
</div>

來源

2016-08-17 Dhrub Kumar

你有使用瀏覽器的檢查元素工具來實際看看有什麼重疊嗎？ – deceze

請參閱：http://stackoverflow.com/questions/2062258/floating-stuff-within-a-div-floats-outside-of-div-why – Wake

它實際上並不重疊。由於你的紅色邊框寬3px，所以看起來如此。看看我做到1px時會發生什麼。

編輯

我通過清除上nav浮動：

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

，現在，它不重疊。這是浮動元素時的預期行爲。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 

 

 
nav { 
 
    float: left; 
 
    width: 200px; 
 
border:1px solid black; 
 
} 
 

 
section { 
 
    border: 1px solid red; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<div class="a"> 
 
<nav> 
 
    <span>nav</span> 
 
    <ul> 
 
     <li><a target="_blank" href="/default.asp">Home</a></li> 
 
     <li><a target="_blank" href="default.asp">CSS</a></li> 
 
     <li><a target="_blank" href="/html/default.asp">HTML</a></li> 
 
     <li><a target="_blank" href="/js/default.asp">JavaScript</a></li> 
 
    </ul> 
 
    </nav> 
 
    <div style="clear:both"></div> 
 
</div> 
 
<div class="b"> 
 
<section> 
 
    <span>section</span> 
 
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p> 
 
    </section> 
 
</div>

來源

2016-08-17 09:59:43 kukkuz

如果刪除導航元素的邊框，則會發現它重疊 –

那是因爲div'a'沒有高度，而'a'裏面的'nav'浮動了。 – kukkuz

@DhrubKumar我清除了浮動，現在它不重疊。這是浮動元素時的預期行爲。 – kukkuz

的porblem是float 如果你不想重複它們。嘗試flex-box

這裏是一個demo

nav { 
 
/* float: left; */ 
 
    height: 100%; 
 
    width: 200px; 
 
    border:1px solid black; 
 
    } 
 
    .container{ 
 
    display: flex; 
 
    height: 100%; 
 
    } 
 

 
    section { 
 
    border: 3px solid red; 
 
    } 
 
    nav ul{ 
 
margin:0; 
 
    }

<div class="container"> 
 
<div class="a"> 
 
<nav> 
 
    <span>nav</span> 
 
    <ul> 
 
     <li><a target="_blank" href="/default.asp">Home</a></li> 
 
     <li><a target="_blank" href="default.asp">CSS</a></li> 
 
     <li><a target="_blank" href="/html/default.asp">HTML</a></li> 
 
     <li><a target="_blank" href="/js/default.asp">JavaScript</a></li> 
 
    </ul> 
 
    </nav> 
 
</div> 
 
<div class="b"> 
 
<section> 
 
    <span>section</span> 
 
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p> 
 
    </section> 
 
</div> 
 
</div> 
 
    <div class= "c"> 
 
<section> 
 
    <span>section</span> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p> 
 
    </section> 
 
</div>

來源

2016-08-17 10:04:28

但是div的重疊有什麼意義？ –

這是重疊的，因爲你的'.a'類是**浮動** div'.b' 你已經給了那裏的浮動 –

你.a塊沒有高度。一個clearfix添加到它

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

<div class="a clearfix"> 
    //rest of code

來源

2016-08-17 10:07:04 AlexG

當

div元素被設置爲浮動和寬度被設置，在div高度將ajust到div內的內容。這就是爲什麼它溢出下一個divow。它使用div「b」來設置第一行的高度。

這是你所追求的：

https://jsfiddle.net/53q6e9hz/

nav { 
    float: left; 
    width: 200px; 
    border: 1px solid black; 
} 
section { 
    border: 3px solid red; 
    display:block; 
} 
.b{ 
width:calc(100% - 202px); 
float: left; 
} 
.row1{ 
    display:inline-block; 
}

來源

2016-08-17 10:16:55

HTML5中div元素的重疊

回答

相關問題