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。此行为可能会导致定义布局方面的问题，例如父级下方的边距或背景图案，颜色或边框等样式。

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

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

使用style="clear: both";
在浮动元素之后添加另一个元素
<br style="clear: both;" />
将样式overflow: hidden添加到父容器。
使用CSS tricks

Div不包含嵌套元素

1 个答案: