浮动属性的漏洞
浮动属性的漏洞
书呆子拍皮球 发表于1年前
浮动属性的漏洞
  • 发表于 1年前
  • 阅读 4
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

当设置如下HTML和css样式时第二个li会相对与上一个继续浮动如下:

这时就需要对li设置一下清除浮动clear属性,对li上下的标签进行一下浮动清除。

理想效果:


HTML代码
<li class="yy_list">
    <div class="box active">
        <div class="choose"></div>
            医院
    </div>
</li>
<li class="yy_list">
    <div class="box">
        <div class="choose"></div>
            类别
    </div>
</li>

css样式

.yy_list{
  height: 96px;
  width: 100%;
 clear: both;
  background-color: #ffffff;
  //border-bottom: 1px solid @border_color;
  .box{
    border-bottom: 1px solid @border_color;
    margin: 0 32px;
    .font(96px, @font24, left, #000, 1);
    .choose {
      width: 20px;
      height: 16px;
      float: left;
      margin: 40px 32px 41px 24px;
    }
    &.active {
      .choose {
        .sprite;
        .ico_16;
      }
      color: @header_color;
    }
  }
}
共有 人打赏支持
粉丝 3
博文 37
码字总数 5423
×
书呆子拍皮球
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: