css避免文字环绕

太过爱你忘了你带给我的痛 2022-01-22 00:23 253阅读 0赞

# 问题 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]

# 我们要的效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 1]

<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`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]: /images/20220122/c662f0f0bd1f476d98db77db486588e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 1]: /images/20220122/e172d36267b84c27bec1a7ea9d453b0e.png