起因

在学习慕课网去哪儿项目时，css一直是让我最头疼的地方，总是看着写会，不看我就想不起来，所以我决定以后遇到类似的问题，我就记录下来并扩展这一类的多种写法，以增强css代码能力。

使用float+流式布局

<style>
.icons {
    overflow hidden
    height 0
    padding-bottom 50%
    <!--
    1.使用padding的方式来占位，对padding，margin而言，百分比是基于父元素的width来决定的。
    2.为什么占位？原因是除导航栏外，下面还有其他元素，如果不占位图片一开始有加载好，导航栏
    的高度就会被下面的元素挤压。
    3.为什么是50%？因为有两栏，一栏25%-->
}
.icons .icon {
    position relative
    overflow hidden
    float left
    width 25%
    height 0
    <!--使用height来解决盒子高度实际不是25%的情况（大概是盒子内有img和p元素会撑开盒子）-->
    padding-bottom 25%
    <!--这里的padding是基于icons的，由于icons没有设置width，默认width是100%，故这里
    也是25%，所以成方形。-->
}
.icons .icon .icon-img {
    position absolute
    top 0
    left 0
    right 0
    bottom .44rem
    box-sizing border-box
    padding .1rem
    <!--图片使用一个盒子包裹起来，此盒子用绝对定位，从bottom增加.44rem，给p元素留空间。-->
}
.icons .icon .icon-img .icon-img-content {
    display block
    margin 0 auto
    height 100%
}

.icons .icon .icon-desc {
    position absolute
    left 0
    right 0
    bottom 0
    height .44rem
    line-height .44rem
    text-align center
    color $dartTextColor
}
</style>
<div class="icons">
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="//s.qunarzz.com/homenode/images/touchheader/hotel.png">
      </div>
      <p class="icon-desc">酒店</p>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="//s.qunarzz.com/homenode/images/touchheader/hotel.png">
      </div>
      <p class="icon-desc">酒店</p>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="//s.qunarzz.com/homenode/images/touchheader/hotel.png">
      </div>
      <p class="icon-desc">酒店</p>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="//s.qunarzz.com/homenode/images/touchheader/hotel.png">
      </div>
      <p class="icon-desc">酒店</p>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="//s.qunarzz.com/homenode/images/touchheader/hotel.png">
      </div>
      <p class="icon-desc">酒店</p>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="//s.qunarzz.com/homenode/images/touchheader/hotel.png">
      </div>
      <p class="icon-desc">酒店</p>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="//s.qunarzz.com/homenode/images/touchheader/hotel.png">
      </div>
      <p class="icon-desc">酒店</p>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="//s.qunarzz.com/homenode/images/touchheader/hotel.png">
      </div>
      <p class="icon-desc">酒店</p>
    </div>
  </div>