css避免文字环绕

问题

我们要的效果

    <div class="step4-firstItem">
      <div class="step4-firstCheck">
        <input type="checkbox" />
      </div>
      <div class="step4-firstMain">
        制订的项目管理方案、各项服务项目补助经费参考标准、资金拨付方案、资金支出范围、资金管理制度不符合国家卫生计生委、财政部有关要求，共<input type="number">
      </div>
    </div>

.step4-firstItem{

}
.step4-firstCheck{
  float: left;
  width: 50px;
}
.step4-firstMain{
  float: left;
}

解决

BFC

    <div class="step4-firstItem clearfloat ">
      <div class="step4-firstCheck">
        <input type="checkbox" />
      </div>
      <div class="step4-firstMain">
        制订的项目管理方案、各项服务项目补助经费参考标准、资金拨付方案、资金支出范围、资金管理制度不符合国家卫生计生委、财政部有关要求，共<input type="number">
      </div>
    </div>

clearfloat给父类添加清除浮动

.step4-firstItem{

}
.step4-firstCheck{
  float: left;
  width: 50px;
}
.step4-firstMain{
	float: left;
    width: calc(100% - 22px);
}

/*清除浮动代码*/
.clearfloat:after {
  display: block;
  clear: both;
  content: '';
  visibility: hidden;
  height: 0;
}
.clearfloat {
  zoom: 1;
}

方法二

给右侧那个加margin