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）漂浮在右边和左边这些从正常文档流（见Mozilla Developer Network更多）被删除，因此div在开发人员工具中检查时不会出现“环绕”或包含元素。

但是，这些元素仍然是文档对象模型（DOM）中div的子元素。

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

然而，这是完全正常的行为，而不是你做错了。

有几种解决方案清理浮动块，以便父元素区域受浮动子元素影响。

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

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

2. 添加风格overflow: hidden到父容器。

3. 使用上CSS tricks