Укладка содержимого после плавающих div с использованием Bootstrap

Question

Я использую классы Bootstrap float-left и float-right. Моя проблема с контентом, который идет после этих операций. Он не признает, что над ним есть контент. Как я могу получить новый div, чтобы сложить под?

* {
  outline: 1px red solid;
  }

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="float-left">
  Div left
</div>
<div class="float-right">
  Div right
</div>

<div>
  New div
</div>

Answer 1

В этом случае, если нет оснований оборачивать плавающие элементы в классы сетки начальной загрузки row и col, вам нужно обернуть их в вспомогательный класс начальной загрузки clearfix

* {
  outline: 1px red solid;
  }

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


<div class="clearfix">
  <div class="float-left">
    Div left
  </div>
  <div class="float-right">
    Div right
  </div>
</div>

<div>
  New div
</div>

Answer 2

Вы пытались сделать так?

* {
  outline: 1px red solid;
  }

.newdiv{
   display:block;
}

.cols{
   width:100%;     
}

.myrow{
   display:flex;
   margin-right: 0px !important;
   margin-left: 0px !important;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="myrow">
  <div class="cols">
    <div class="float-left">
      Div left
    </div>
    <div class="float-right">
      Div right
    </div>
  </div>

</div>

<div class="newdiv">
  New div
</div>