Div不包含嵌套元素

I have been having trouble with one of my divs for some reason, even though the nav tags are nested within it when I inspect element with firefox or in chrome the div seems to be completely on its own.

由于某些原因,我一直遇到我的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>

Maybe this is something to do with the css styling for it so here is the css too. I have a feeling it might be something to do with hammer for mac but it seems to work in other respects.

也许这与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;
}

Thanks in advance.

提前致谢。

1 个解决方案

#1

As both your nav elements (social/headnav) contained within the div element (confusingly named "nav") are floated to the right and the left these are removed from the normal document flow (see Mozilla Developer Network for more), and thus the div won't appear to "wrap around" or contain the elements when inspected in developer tools.

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

These elements are however still children of the div on the Document Object Model (DOM).

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

Normally an element that only contains floated children would have a height of 1px but in this case it is 10px due to the padding you have applied. This behaviour can cause a problem in terms of defining layout, for example margin below the parent, or styling like background pattern, colour or borders.

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

It is however entirely normal behaviour and not something you have done wrong.

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

There are several solutions to clearing floats so that the parent element area is affected by the floated children.

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

Adding another element after the floated elements with style="clear: both";

使用style =“clear:both”在浮动元素之后添加另一个元素;

<br style="clear: both;" />
Adding the style overflow: hidden to the parent container.

添加样式溢出:隐藏到父容器。
Using one of the clearfix methods listed on CSS tricks

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

#1