clearfix的应用

之前遇到一个问题，引用Bootstrap框架时

一行显示四个模块，小屏幕时显示两个模块

当内容一样时，大小屏幕时一样的，但是当其中一个和另一个内容不同时，展示效果就会有错乱

  <div class="container">
    <div class="row">
    	<div class="col-xs-6 col-sm-3 test01"><span>div1: .col-xs-6 .col-sm-3多点内容多点内容多点内容多点内容多点内容多点内容</span></div>
        <div class="col-xs-6 col-sm-3 test01"><span>div2: .col-xs-6 .col-sm-3</span></div>
        <div class="col-xs-6 col-sm-3 test01"><span>div3: .col-xs-6 .col-sm-3</span></div>
        <div class="col-xs-6 col-sm-3 test01"><span>div4: .col-xs-6 .col-sm-3</span></div>
    </div>
  </div> 

后来查了一下资料，原来是没有清除浮动

  <div class="container">
    <div class="row">
    	<div class="col-xs-6 col-sm-3 test01"><span>div1: .col-xs-6 .col-sm-3多点内容多点内容多点内容多点内容多点内容多点内容</span></div>
        <div class="col-xs-6 col-sm-3 test01"><span>div2: .col-xs-6 .col-sm-3</span></div>
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-3 test01"><span>div3: .col-xs-6 .col-sm-3</span></div>
        <div class="col-xs-6 col-sm-3 test01"><span>div4: .col-xs-6 .col-sm-3</span></div>
    </div>
  </div> 

　增加了<div class="clearfix visible-xs"></div> 因为只在超小屏幕清除浮动 所以引用visible-xs样式控制