html元素没有被媒体查询推下来

Question

我确信此问题之前已经得到解答，但大多数问题都说“绝对”定位是罪魁祸首。我已经尝试调整定位，但无法弄清楚P元素没有被按下的原因。

在我的真实项目中，需要在媒体查询中按下注释掉的“bannerArea”，但背景区域会覆盖我的导航菜单。

http://codepen.io/fastpenguin91/pen/BLrZBA?editors=1100

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.nav-container {
  background: #fff;
  width: 100%;
  height: 106px;
}
.nav {
  display: table;
}
.primary-nav {
  width: 648px;
  float: right;
  padding-right: 4%;
  height: 109px;
}
.listItem {
  display: table-cell;
  vertical-align: middle;
}
.listItem {} .logo {
  background: #ffffff;
  display: inline-block;
  padding: 15px;
}
.logo--primary {
  float: left;
}
.primary-nav--content {
  border-left: 2px dashed black;
  padding-left: 8px;
}
.test {
  height: 50px;
  background: pink;
}
/*
    .bannerArea {
        background: url(../assets/glowgradient.png) no-repeat;
        height: 342px;
        position: relative;
    }*/

/*
    .bannerImg {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
    }
    
    
    */

@media only screen and (max-width: 1006px) {
  .nav {
    display: block;
  }
  .primary-nav {
    width: 100%;
    padding-right: 0%;
    height: auto;
  }
  .nav-container {
    height: auto;
  }
  .listItem {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 10px 0px;
  }
  .primary-nav--content {
    border: none;
    border-bottom: 2px solid black;
  }
  .logo--primary {
    text-align: center;
    margin: 0 auto;
    float: none;
    display: block;
  }
}

<header class="nav-container">
  <img class="logo  logo--primary" src="assets/logo.png" />
  <ul class="nav  primary-nav  clearfix">
    <li class="listItem">
      <div class="primary-nav--content">
        <p>HOME</p>
        <p>Back to Home</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>PRODUCTS</p>
        <p>What we have for you</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>SERVICES</p>
        <p>Things we do</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>BLOG</p>
        <p>Follow Our Updates</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>CONTACT</p>
        <p>Ways to reach us</p>
      </div>
    </li>
  </ul>
</header>

<div class="test">
  <p>hello</p>
</div>
<!--
    <div class="bannerArea">

        <img class="bannerImg" src="assets/bannerImg.jpg"/>
    </div> -->

Answer 1

您清除了导航的浮动，但没有清除与嵌套级别相同的徽标。将clear: both;添加到.test样式。

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.nav-container {
  background: #fff;
  width: 100%;
  height: 106px;
}
.nav {
  display: table;
}
.primary-nav {
  width: 648px;
  float: right;
  padding-right: 4%;
  height: 109px;
}
.listItem {
  display: table-cell;
  vertical-align: middle;
}
.listItem {} .logo {
  background: #ffffff;
  display: inline-block;
  padding: 15px;
}
.logo--primary {
  float: left;
}
.primary-nav--content {
  border-left: 2px dashed black;
  padding-left: 8px;
}
.test {
  clear: both;
  height: 50px;
  background: pink;
}
/*
    .bannerArea {
        background: url(../assets/glowgradient.png) no-repeat;
        height: 342px;
        position: relative;
    }*/

/*
    .bannerImg {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
    }
    
    
    */

@media only screen and (max-width: 1006px) {
  .nav {
    display: block;
  }
  .primary-nav {
    width: 100%;
    padding-right: 0%;
    height: auto;
  }
  .nav-container {
    height: auto;
  }
  .listItem {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 10px 0px;
  }
  .primary-nav--content {
    border: none;
    border-bottom: 2px solid black;
  }
  .logo--primary {
    text-align: center;
    margin: 0 auto;
    float: none;
    display: block;
  }
}

<header class="nav-container">
  <img class="logo  logo--primary" src="assets/logo.png" />
  <ul class="nav  primary-nav  clearfix">
    <li class="listItem">
      <div class="primary-nav--content">
        <p>HOME</p>
        <p>Back to Home</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>PRODUCTS</p>
        <p>What we have for you</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>SERVICES</p>
        <p>Things we do</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>BLOG</p>
        <p>Follow Our Updates</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>CONTACT</p>
        <p>Ways to reach us</p>
      </div>
    </li>
  </ul>
</header>

<div class="test">
  <p>hello</p>
</div>
<!--
    <div class="bannerArea">

        <img class="bannerImg" src="assets/bannerImg.jpg"/>
    </div> -->

Answer 2

这很简单。 将float和width添加到父级：

.test {
    height: 50px;
    background: pink;
    float: left;
    width: 100%;
}

浮动和宽度使元素与其他元素相关，因此它被推到横幅下方。

Answer 3

你应该删除花车。作为一项规则，他们应该完全避免，当然不会用于布局。在您的情况下，您希望菜单是块级别，因此只需删除浮动：

.primary-nav {
   width: 100%;
   padding: 0%; /* <- looked weird with left padding */
   height: auto;
   float:none; /* <- don't use floats for layout */
}

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.nav-container {
  background: #fff;
  width: 100%;
  height: 106px;
}
.nav {
  display: table;
}
.primary-nav {
  width: 648px;
  float: right;
  padding-right: 4%;
  height: 109px;
}
.listItem {
  display: table-cell;
  vertical-align: middle;
}
.listItem {} .logo {
  background: #ffffff;
  display: inline-block;
  padding: 15px;
}
.logo--primary {
  float: none;/*left*/;
}
.primary-nav--content {
  border-left: 2px dashed black;
  padding-left: 8px;
}
.test {
  height: 50px;
  background: pink;
}
/*
    .bannerArea {
        background: url(../assets/glowgradient.png) no-repeat;
        height: 342px;
        position: relative;
    }*/

/*
    .bannerImg {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
    }
    
    
    */

@media only screen and (max-width: 1006px) {
  .nav {
    display: block;
  }
  .primary-nav {
    width: 100%;
    padding: 0%;
    height: auto;
    float:none;
  }
  .nav-container {
    height: auto;
  }
  .listItem {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 10px 0px;
  }
  .primary-nav--content {
    border: none;
    border-bottom: 2px solid black;
  }
  .logo--primary {
    text-align: center;
    margin: 0 auto;
    float: none;
    display: block;
  }
}

<header class="nav-container">
  <img class="logo  logo--primary" src="assets/logo.png" />
  <ul class="nav  primary-nav  clearfix">
    <li class="listItem">
      <div class="primary-nav--content">
        <p>HOME</p>
        <p>Back to Home</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>PRODUCTS</p>
        <p>What we have for you</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>SERVICES</p>
        <p>Things we do</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>BLOG</p>
        <p>Follow Our Updates</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>CONTACT</p>
        <p>Ways to reach us</p>
      </div>
    </li>
  </ul>
</header>

<div class="test">
  <p>hello</p>
</div>
<!--
    <div class="bannerArea">

        <img class="bannerImg" src="assets/bannerImg.jpg"/>
    </div> -->