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元素的重叠

回答

相关问题