如何在div周围包裹锚？

Question

我遇到了在6个不同的div周围包装锚标签的问题，并且不确定为什么它们以不明显的方式表现。我重新创建了问题here。

问题是锚点没有清除div并在尝试设置锚标记样式时导致一些问题。

a {
  text-decoration: none;
}

#triangle-topright {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-left: 25px solid transparent;
}

.categorypost {
  height: 200px;
  margin-bottom: 80px;
  width: 320px;
  display: inline-block;
  color: #FFF;
  font-family: "ff-tisa-web-pro", serif;
  font-size: 20px;
}

a.catpostlink {
  text-decoration: underline;
  font-size: 20px;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}

a.catpostlink:hover {
  color: #005e48;
  text-decoration: underline;
  font-size: 20px;
}

<div class="catwrapper">

  <div class="categorylist">


    <a href="businesses.php" title="SME Businesses for sale">
      <div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg'); background-size: 100%;">

        <div style="float: left; background-color: #498d7b; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
          <p style="line-height: 0px;">Businesses</p>
        </div>


        <div id="triangle-topright" style="float:right; border-top: 25px solid #498d7b;"></div>

      </div>
    </a>



    <a href="carehomes.php" title="Care homes for sale">
      <div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg'); background-size: 100%;">

        <div style="float: left; background-color: #618ab8; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
          Care homes
        </div>

        <div id="triangle-topright" style="float:right; border-top: 25px solid #618ab8;"></div>
      </div>
    </a>


    <a href="kennelscatteries.php" title="Kennels & Catteries for sale">
      <div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg');background-size: 100%;">

        <div style="float: left; background-color: #fed670; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
          Kennels & catteries
        </div>

        <div id="triangle-topright" style="float:right; border-top: 25px solid #fed670;"></div>
      </div>
    </a>


    <a href="daynurseries.php" title="Day nurseries for sale">
      <div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg');background-size: 100%;">

        <div style="float: left; background-color: #fed670; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
          Day nurseries
        </div>

        <div id="triangle-topright" style="float:right; border-top: 25px solid #fed670;"></div>
      </div>
    </a>



    <a href="postoffice.php" title="Post Offices for sale">
      <div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg');background-size: 100%;">

        <div style="float: left; background-color: #aa232a; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
          Post offices & shops
        </div>

        <div id="triangle-topright" style="float:right; border-top: 25px solid #aa232a;"></div>
      </div>
    </a>





    <a href="catering.php" title="Catering Businesses for sale">
      <div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg');background-size: 100%;">

        <div style="float: left; background-color: #0e2c67; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
          Catering businesses
        </div>

        <div id="triangle-topright" style="float:right; border-top: 25px solid #0e2c67;"></div>
      </div>
    </a>

  </div>
</div>