Clearfix div 不会清除引导程序中的浮动

Question

在第二个 .row div 中，我有一个 .fizetesi_modok div。我希望这个 .fizetesi_modok div 位于其他 div 之下，所以我想清除浮动。

但是 .clearfix 在这里什么都不做，.fizetesi_modok 浮动在前一个 div 旁边。

在第 3 个 .row 中，.szallitasi_modok div 没有浮动。为什么它在那里工作？

<form method="post">
            <h2 class="megrendeles_title">Átvevő adatai</h2>
            <div class="row">
                <div class="col-md-3 megrendeles_box"> 
                    <span class="megrendeles_input_title">Vezetéknév </span>
                    <input required type="text" name="user_vnev" id="user_vnev" class="form-control input-lg" value="">
                </div>
                <div class="col-md-3 megrendeles_box"> 
                    <span class="megrendeles_input_title">Keresztnév </span>
                    <input required type="text" name="user_knev" id="user_knev" class="form-control input-lg" value="">
                </div>
                <div class="col-md-3 megrendeles_box"> 
                    <span class="megrendeles_input_title">E-mail cím </span>
                    <input required type="text" name="user_email" id="user_email" class="form-control input-lg" value="">
                </div>
                <div class="col-md-3 megrendeles_box"> 
                    <span class="megrendeles_input_title">Telefonszám </span>
                    <input required type="text" name="user_tel" id="user_tel" class="form-control input-lg" value="">
                </div>
                <div class="clearfix"></div>
             </div>




             <hr>



             <h2 class="megrendeles_title">Számlázási adatok</h2>
             <div class="row">
                <div class="col-md-3 megrendeles_box"> 
                    <span class="megrendeles_input_title">Számlázási név </span>
                    <input required type="text" name="user_szamla_nev" id="user_szamla_nev" class="form-control input-lg" value="">
                </div>
                <div class="col-md-3 megrendeles_box"> 
                    <span class="megrendeles_input_title">Irányítószám </span>
                    <input required type="text" name="user_szamla_irsz" id="user_szamla_irsz" class="form-control input-lg" value="">
                </div>
                <div class="col-md-3 megrendeles_box">
                    <span class="megrendeles_input_title">Település </span>
                    <input required type="text" name="user_szamla_varos" id="user_szamla_varos" class="form-control input-lg" value="">
                </div>
                <div class="col-md-3 megrendeles_box">
                    <span class="megrendeles_input_title">Utca, házszám </span>
                    <input required type="text" name="user_szamla_utca" id="user_szamla_utca" class="form-control input-lg" value="">
                </div>
                <div class="clearfix"></div>
                <div class="col-md-3 megrendeles_box">
                    <span class="megrendeles_input_title">Adószám</span>
                    <input type="text" name="user_adoszam" id="user_adoszam" class="form-control input-lg" value="">
                </div>
                <div class="clearfix"></div>
                <div class="col-md-6 szallitasi_modok">
                    <div class="szallitasi_mod_div"><label for="fizetesi_mod-1"><input type="radio" id="fizetesi_mod-1" name="fizetesi_mod" value="1" > Átutalás</label></div><div class="szallitasi_mod_div"><label for="fizetesi_mod-2"><input type="radio" id="fizetesi_mod-2" name="fizetesi_mod" value="2" > Előre utalás</label></div>                    </div>
                <div class="clearfix"></div>
             </div>




             <hr>




             <h2 class="megrendeles_title">Szállítási adatok</h2>
             <div class="row">
                <div class="col-md-3 megrendeles_box"> 
                    <span class="megrendeles_input_title">Irányítószám </span>
                    <input required type="text" name="user_szallit_irsz" id="user_szallit_irsz" class="form-control input-lg" value="">
                </div>
                <div class="col-md-3 megrendeles_box">
                    <span class="megrendeles_input_title">Település </span>
                    <input required type="text" name="user_szallit_varos" id="user_szallit_varos" class="form-control input-lg" value="">
                </div>
                <div class="col-md-3 megrendeles_box">
                    <span class="megrendeles_input_title">Utca, házszám </span>
                    <input required type="text" name="user_szallit_utca" id="user_szallit_utca" class="form-control input-lg" value="">
                </div>
                <div class="clearfix"></div>
                <div class="col-md-6 szallitasi_modok">
                    <div class="szallitasi_mod_div"><label for="atvetel-2"><input type="radio" id="atvetel-2" name="atvetel" value="2" > Gyári szállítás darus autóval</label></div><div class="szallitasi_mod_div"><label for="atvetel-1"><input type="radio" id="atvetel-1" name="atvetel" value="1" > Személyes átvétel az üllői üzletben</label></div>                    </div>
                <div class="clearfix"></div>
             </div>                
        </form>

Answer 1

根据您的问题：

• 在第二个 .row div 中，我有一个 .fizetesi_modok div。我希望这个 .fizetesi_modok div 位于其他 div 之下，所以我想清除浮动。但是 .clearfix 在这里什么都不做，.fizetesi_modok 浮动在前一个 div 旁边。

  • 这是因为所有 5 input 元素（“Számlázási név”、“Irányítószám”、“Település”、“Utca, házszám”和“Adószám”）在单选按钮占据 3 列之前，您使用了 col-md-3，因此它位于第 5 个 input type='text' 元素旁边
  • 解决：您可以使用“col-md-12”来确保单选按钮始终位于单独的行中

• 在第 3 个 .row 中，.szallitasi_modok div 没有浮动。为什么它在那里工作？

  • 您已经在此处前 3 个输入字段（“Irányítószám”、“Település”和“Utca, házszám”）分别占据了 3 列，并且你的szallitasi_modok 单选按钮上有一个col-6 类，因为只有col-3 的位置，它被撞到下一行；

  • 我向其中添加了类 'col-3' 以显示它回到前 3 个输入字段旁边

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


<form method="post">
  <h2 class="megrendeles_title">Átvevő adatai</h2>
  <div class="row">
    <div class="col-md-3 megrendeles_box">
      <span class="megrendeles_input_title">Vezetéknév </span>
      <input required type="text" name="user_vnev" id="user_vnev" class="form-control input-lg" value="">
    </div>
    <div class="col-md-3 megrendeles_box">
      <span class="megrendeles_input_title">Keresztnév </span>
      <input required type="text" name="user_knev" id="user_knev" class="form-control input-lg" value="">
    </div>
    <div class="col-md-3 megrendeles_box">
      <span class="megrendeles_input_title">E-mail cím </span>
      <input required type="text" name="user_email" id="user_email" class="form-control input-lg" value="">
    </div>
    <div class="col-md-3 megrendeles_box">
      <span class="megrendeles_input_title">Telefonszám </span>
      <input required type="text" name="user_tel" id="user_tel" class="form-control input-lg" value="">
    </div>
    <div class="clearfix"></div>
  </div>




  <hr>



  <h2 class="megrendeles_title">Számlázási adatok</h2>
  <div class="row">
    <div class="col-md-3 megrendeles_box">
      <span class="megrendeles_input_title">Számlázási név </span>
      <input required type="text" name="user_szamla_nev" id="user_szamla_nev" class="form-control input-lg" value="">
    </div>
    <div class="col-md-3 megrendeles_box">
      <span class="megrendeles_input_title">Irányítószám </span>
      <input required type="text" name="user_szamla_irsz" id="user_szamla_irsz" class="form-control input-lg" value="">
    </div>
    <div class="col-md-3 megrendeles_box">
      <span class="megrendeles_input_title">Település </span>
      <input required type="text" name="user_szamla_varos" id="user_szamla_varos" class="form-control input-lg" value="">
    </div>
    <div class="col-md-3 megrendeles_box">
      <span class="megrendeles_input_title">Utca, házszám </span>
      <input required type="text" name="user_szamla_utca" id="user_szamla_utca" class="form-control input-lg" value="">
    </div>
    <div class="clearfix"></div>
    <div class="col-md-3 megrendeles_box">
      <span class="megrendeles_input_title">Adószám</span>
      <input type="text" name="user_adoszam" id="user_adoszam" class="form-control input-lg" value="">
    </div>
    <div class="clearfix"></div>
    <div class="col-md-12 szallitasi_modok">
      <div class="szallitasi_mod_div"><label for="fizetesi_mod-1"><input type="radio" id="fizetesi_mod-1"
              name="fizetesi_mod" value="1"> Átutalás</label></div>
      <div class="szallitasi_mod_div"><label for="fizetesi_mod-2"><input type="radio" id="fizetesi_mod-2"
              name="fizetesi_mod" value="2"> Előre utalás</label></div>
    </div>
    <div class="clearfix"></div>
  </div>




  <hr>




  <h2 class="megrendeles_title">Szállítási adatok</h2>
  <div class="row">
    <div class="col-md-3 megrendeles_box">
      <span class="megrendeles_input_title">Irányítószám </span>
      <input required type="text" name="user_szallit_irsz" id="user_szallit_irsz" class="form-control input-lg" value="">
    </div>
    <div class="col-md-3 megrendeles_box">
      <span class="megrendeles_input_title">Település </span>
      <input required type="text" name="user_szallit_varos" id="user_szallit_varos" class="form-control input-lg" value="">
    </div>
    <div class="col-md-3 megrendeles_box">
      <span class="megrendeles_input_title">Utca, házszám </span>
      <input required type="text" name="user_szallit_utca" id="user_szallit_utca" class="form-control input-lg" value="">
    </div>
    <div class="clearfix"></div>
    <div class="col-md-3 szallitasi_modok">
      <div class="szallitasi_mod_div"><label for="atvetel-2"><input type="radio" id="atvetel-2" name="atvetel"
              value="2"> Gyári szállítás darus autóval</label></div>
      <div class="szallitasi_mod_div"><label for="atvetel-1"><input type="radio" id="atvetel-1" name="atvetel"
              value="1"> Személyes átvétel az üllői üzletben</label></div>
    </div>
    <div class="clearfix"></div>
  </div>
</form>