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

您清除了导航的 float ，但未清除位于同一嵌套级别的 Logo 的 float 。添加 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> -->