Div不包含嵌套元素

Question

我出于某种原因遇到了一个div的问题,即使我用firefox或chrome检查元素时导航标签嵌套在其中,div似乎完全独立.

<div class="nav">  
  <nav class="social">
    <ul>
      <li><a href="#"><img class="icon" src="assets/facebook.png" alt=""></a></li>
      <li><a href="#"><img class="icon" src="assets/google.png" alt=""></a></li>
      <li><a href="#"><img class="icon" src="assets/linkedin.png" alt=""></a></li>
      <li><a href="#"><img class="icon" src="assets/twitter.png" alt=""></a></li>
      <li><a href="#"><img class="icon" src="assets/wordpress.png" alt=""></a></li>
    </ul>
  </nav>
  <!-- @include _nav -->
</div>

也许这与css样式有关,所以这里也是css.我觉得它可能与锤子为mac有关,但它似乎在其他方面工作.

.head {
padding-top: 25px;
overflow: hidden;
padding-bottom: 10px;
// background-color: yellow;
}

h1 {
margin: auto;
text-align: center;
color:white;
font-family: sans-serif;
font-size: 35px;
text-shadow: 0 1px 0 #ccc, 
           0 2px 0 #c9c9c9,
           0 3px 0 #bbb,
           0 4px 0 #b9b9b9,
           0 5px 0 #aaa,
           0 6px 1px rgba(0,0,0,.1),
           0 0 5px rgba(0,0,0,.1),
           0 1px 3px rgba(0,0,0,.3),
           0 3px 5px rgba(0,0,0,.2),
           0 5px 10px rgba(0,0,0,.25),
           0 10px 10px rgba(0,0,0,.2),
           0 20px 20px rgba(0,0,0,.15);
padding-bottom: 10px
}

.banner {
height: 200px;
background-color: red;
float: left;
margin: 0px;

}

.callout {
height: 200px;
background-color: green;
float: right;
margin-left: 5px;
margin-right: 0px;
}

.nav {
padding-bottom: 10px;
}

.headnav {
padding-top: 10px;
float: left;
overflow: hidden;
}

nav li {
display: inline;
padding-right: 15px;
}

nav li:last-child {
padding-right: 0px;
}

nav li a {
text-decoration: none;
color: white;
clear: both;
font-size: 20px;
padding-bottom: 4px;
}

nav li a:hover {
color: gray;
}

.icon {
width: 45px;
height: auto;
}

.social {
float: right;
overflow: hidden;
}

.social li {
display: inline;
}

提前致谢.

Answer 1

由于div元素中包含的导航元素(social/ headnav)(混淆地命名为"nav")浮动到右侧和左侧,因此从正常文档流中删除(参见Mozilla Developer Network了解更多信息),因此赢得了div在开发人员工具中检查时,似乎"环绕"或包含元素.

但是,这些元素仍然是文档对象模型(DOM)上div的子元素.

通常,只包含浮动子元素的元素的高度为1px,但在这种情况下,由于您应用的填充,它的大小为10px.此行为可能会导致定义布局方面的问题,例如父级下方的边距或背景图案,颜色或边框等样式.

然而,这是完全正常的行为,而不是你做错了什么.

清除浮动有几种解决方案,以便父元素区域受浮动子节点的影响.

1. 在浮动元素之后添加另一个元素 style="clear: both";

   <br style="clear: both;" />

2. 将样式添加overflow: hidden到父容器.

3. 使用CSS技巧中列出的clearfix方法之一