css避免文字环绕

文字环绕"/>

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