floatを使うと画像が切れる

Question

floatを使ってフォームを右側に寄せようとしたのですが、右側に寄せると背景画像が切れます。切れさせないためにはどうすればいいでしょうか。
![

 <div class="background-image">

      <div class="row justify-content-end">
        <div class="border col-5">
          <br>
          <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ<h1>
          <h2 class="size1"><b>宿泊施設の内容を記入</b></h2>
          <br>
          <div class="row clear_form">
            <div class="col-md">
              <form>
                <div class="form-group">
                  <input type="text" class="form-control">
                  <div class="d-flex">
                    <select class="form-control w-50">
                      <option>まるまる貸切</option>
                      <option>個室</option>
                      <option>シェアルーム</option>
                    </select>
                  <select class="form-control w-50">
                      <option>ゲスト1人</option>
                      <option>ゲスト2人</option>
                      <option>ゲスト3人</option>
                      <option>ゲスト4人</option>
                      <option>ゲスト5人</option>
                      <option>ゲスト6人</option>
                      <option>ゲスト7人</option>
                      <option>ゲスト8人</option>
                      <option>ゲスト9人</option>
                      <option>ゲスト10人</option>
                      <option>ゲスト11人</option>
                      <option>ゲスト12人</option>
                      <option>ゲスト13人</option>
                      <option>ゲスト14人</option>
                      <option>ゲスト15人</option>
                      <option>ゲスト16人</option>
                  </select> 
                  <button type="submit" class="btn btn-danger">はじめる</button>   
                </div>
              </form>
            </div>
          </div>
        </div>
        </div>
      </div>


    </div>
コード

.background-image{
  background-image:url(../airbnb.png);
  background-repeat: no-repeat;
  background-position: center center;
  padding-bottom: 20%;
}
.background-image1{
      background-image:url(../airbnb3.png);
    }
.row{
      width: 60%;
      float: right;
    }
    .clear_form{
      clear: both;
    }
コード

Comments

[hatena19]

呈示のコードには画像を表示するものはないですが。
症状を再現できるコードを提示してください。

[writegrint]

すいません、画像を表示するコードを追加しました。

[hatena19]

htmlのコードを見ると bootstrap のクラス名が見られますが、bootstrap は使ってますか。
使っているなら、タグに追加してください。

[writegrint]

追加しました。

Answer 1

修正依頼にもコメントしましたが、bootstrap を使っているならタグに追加してください。

とりあえず、
下記の開始タグと終了タグの対応がおかしいです。

          <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ<h1>

正しくは、

          <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ</h1>

あと、background-size: cover; を追加してみてください。

.background-image{
  background-image:url(../airbnb.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; /*追加*/
  padding-bottom: 20%;
}

bootstrapを使っているなら、下記のCSSは不要かと思います。

.row{
      width: 60%;
      float: right;
    }
    .clear_form{
      clear: both;
    }

Answer 2

上記のhtmlでclear_formでclearしたい場合、

.clear_form{
　　clear: both;
}

ではなく、

.clear_form::after{
   content: "";
   display: block;
　　clear: both;
}

のような感じで適応されると思います。

clearの使い方についてはこちらを参考にしてください。
https://60pablog.com/css-clear/