2

由于某种原因，我的一个 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。我有一种感觉，这可能与hammer for 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;
}

提前致谢。

4

1 回答 1

8

由于包含在 div 元素（混淆地命名为“nav”）中的两个导航元素（social/ headnav）都浮动到右侧和左侧，因此这些元素从正常的文档流中删除（有关更多信息，请参阅Mozilla 开发者网络），因此 div 赢得了在开发人员工具中检查时，它似乎不会“环绕”或包含元素。

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

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

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

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

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

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

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

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

于 2013-05-12T20:36:16.023 回答