折叠两个浮动div之间的边界？

Question

所以我在崩溃两个浮动div之间的边界时遇到了麻烦。我知道如何使用表格单元格，但这些不是单元格，我不使用表格。这是图片看起来像page image

的图片

这也是我的html和css代码。

body{
background-color: #C8C8C8;
}

h1{
    text-shadow: 2px 3px gray;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
 }

 img.width{
    width: 100%;
  }

  img.tLeft {
    float: left;
    z-index: -1;
    padding-right: 3em;
  }

  img.tRight {
    float: right;
    z-index: -1;
  }


 .div1 {
    width: 900px;
    height: 700px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    box-shadow: 10px 10px 5px #A8A8A8;
    background-color: #4dffa6;
    overflow: hidden;
    z-index: -1;
    }

    .div2 {
     height: auto;
     border: 1px solid red;
     overflow: hidden;
      border-top-left-radius: 20px;
    top: 0;
    left: 0;
    float: left;
    border-right: collapse;
    }

   .div3 {
    height: auto;
      border: 1px solid red;
     overflow: hidden;
     border-top-right-radius: 20px;
     top: 0;
     right: 0;
     z-index: -1;
     float: right;

     }

 .div4 {
   height: auto;
    border: 1px solid blue;
    background-color: lightgray;
    overflow: hidden;
    left: 0;
    display: block;
}

 strong{
    font-size: 70px;
    color: red;
  }

<div>
 <img class="width" src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>

<h1>TMNT (2015)</h1>

<!---block one--->
<div class="div1">

    <!---block two--->
    <div class="div2">
    <img class="tLeft" src="images/rottenlarge.png" alt="Rotten" /> <strong>33%</strong>
    </div>

    <!---block three--->
    <div class="div3">
    <img class="tRight" src="images/overview.png" alt="general overview" />
    </div>

    <!---box four
    <div class="div4">
    <p>HEllo relkgnaldfkgnadlgsknasdlkgnasldkgnaslkdgnasldkn aslkdgnslkdgn sjdnaslkdjfnaslkdjfn sdgnaslkjgnlaskjgdn
    </p>
    </div>
    --->
</div>

Answer 1

可能值得使用CSS重置，以便浏览器不会影响您的CSS - http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/