html - 移动到响应和返回后 Div 不能正确 float

Question

我在网页上有一个页脚。一些版权文本漂浮在页面左侧，右侧有一些页脚元素。移动到响应式时，版权 div 应堆叠在其余页脚详细信息下方。除了当您移动到 ​​640 以下然后再次返回更大的 View 时，所有这些都工作正常。 float 的 div 位于其他页脚元素下方。

这是 chrome 而非 IE 的问题。

参见 Codepen这里。

HTML:

<div id="footerSectionWrapper">
    <div id="footerSection">
        <ul id="footerList">
            <li class="details">
         <p> details text </p>
            </li>
       <li class="contact">
          <p> contact number: 123</p>
       </li>
            <li class="resources">
         <p> Some links! </p>
            </li>
            <li class="services">
         <p> Other stuff!</p>
            </li>
        </ul>
        <div id="copyrightSection">
      <p> Copyright text</p>
        </div>
        <div class="clear"></div>
  </div><!--/footerSection-->
    <div class="clear"></div>
</div><!--/footerSectionWrapper-->

CSS:

#footerSectionWrapper {
  width: 100%;
  background-color: green;
  vertical-align: top;
  padding: 20px 0px;
}

#footerSection {
    background-color:red;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 10px;
}

#footerList {
    background-color: blue;
  list-style-type: none;
  display: block;
  margin: 0px auto;
  text-align: center !important;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
}

#footerList li {
    background-color: lightblue;
  border: 1px solid darkblue;
  display: inline-block;
  width: 90%;
  height: auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 10px 0px;
  border-bottom: 1px solid #CCC;
  margin: auto;
}

#copyrightSection {
    background-color:yellow;
  width: 100%;
  display: block;
  padding: 20px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  text-align: center;
}

@media all and (min-width:641px){
  #footerList {
    list-style-type: none;
    width: 50%;
    display: inline-block;
    margin: 0px;
  }

  #footerList li {
    display: inline-block;
    width: 49%;
    float: left;
    height: 150px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-left: 1px solid #CCC;
    padding: 10px 10px 10px 20px;
    text-align: left;
    }

  #footerList li.details, li.contact {
    border-bottom: 1px solid #CCC;
    padding-top: 50px !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

  #footerList li.services, li.resources {
    padding-bottom: 250px !important;
    border-bottom: none !important;
  }

  #copyrightSection {
    width: 39%;
    display: inline-block;
    padding: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    float: left;
    text-align: left;
    }

}

Answer 1

将 float:left 也设置为顶部的通用 css，而不仅仅是在媒体查询中。

#copyrightSection {
    background-color:yellow;
  width: 100%;
  display: block;
  padding: 20px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  text-align: center;
  float:left;
}

检查这支笔。 http://codepen.io/alexincarnati/pen/ctAud

也将 float:left; 添加到媒体查询之外的#copyrightSection 的第一组 css 规则中。