Div重叠

Question

我遇到了div相互重叠的问题，即使它们应该出现在彼此之下，我也不知道为什么会发生这种情况。

容器

  <div class="container">
        <div class="box" style="float:right">
            <p></p>
        </div>

        <div class="box" style="float:left">
            <p></p>
        </div>


            <div class="longContent topLongContent">
         <h2>Long Content</h2>
         <p></p>
            </div>

            <div class="longContent">
         <h2>Long Content</h2>
         <p></p>
            </div>

            <div class="longContent">
         <h2>Long Content</h2>
         <p></p>
            </div>

  </div>

样式表

  body{
background-image:url('sos.png');
color:#ecf0f1;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 300;
   }

  .container{
width:50%;
margin: 0 auto;
  }


   .box{
width:49%;
background-color:#2c3e50;   
margin-top:5%;
   }

   .box p{
 padding: 2% 5% 3% 5%;
   }

   .box h2{
 font-weight:800;
 padding: 2% 5% 0% 3%;
    }

   .longContent{
     width:100%;
 margin: 0 auto;
 background-color:#34495e;
 margin-top:2%;
    }

   .topLongContent{
 margin-top:16%;
   }

   .longContent p{
 padding: 2% 5% 3% 5%;
   }

   .longContent h2{
 font-weight:800;
 padding: 2% 5% 0% 3%;
   }

   .header{
 width:100%;
 background-color:#2c3e50;  

/*  Drop shadow Bottom */
-webkit-box-shadow: 0 6px 4px -6px black;
   -moz-box-shadow: 0 6px 4px -6px black;
        box-shadow: 0 6px 4px -6px black;
    }


    .header h1{
  font-size:2.5em;
  font-weight:900;
  padding: 1% 0% 1% 3%;
     }

     .callToAction{
   float:right;
   font-size:1.25em;
   margin:-2% 5% 0% 0%;
   color:#f39c12;
      }

我甚至尝试删除.topLongContent，但内容仍然超过了圈数，并且就像盒子div是longContent div的一部分一样。

Answer 1

尝试使用clear: both元素上的.longContent清除浮动广告。

Answer 2

将clear:both用于课程longContent

Answer 3

.clear属性可能对您有帮助。

链接

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

http://www.w3.org/wiki/CSS/Properties/clear