Bootstrap布局页脚与其他元素发生碰撞

Question

好的，所以我在bootstrap + Rails中构建一个布局。

如果我上传较大的图片，则页脚不会与包含内容信息的文本框冲突，但是我正在使用的图片存在问题。

如何使用我喜欢的元素（图片）并确保页脚不会与文本框冲突？

视图看起来像这样

`<h1>Contact#index</h1>
<p>Find me in app/views/contact/index.html.erb</p>

<div class="container">
  <div class="content-overlap">
    <h2>Contact Us</h2>
      <p> For investment information call: <br>
        +phonenumberhere237 or +phonenumberhere8 <br> <br>
          For legal contact:+phonenumberhere0 <br>
           For partnership: phonenumberhere7142 <br>
                  </p>
  </div>
  <div class="image-overlap">
    <img src="assets\administration.jpg"  >
  </div>
</div>`

使用bootstrap和rails 5.1.4（但事实证明代码来自codepen而不是bootstrap，所以忽略分叉代码在这里https://codepen.io/Anthematics/pen/RMwZJG）

页脚本身在我的布局文件夹中呈现为部分 - 这个问题在一些地方仍然存在，但这个元素最少，一旦解决了，我相信我可以在其他地方解决。

HTML中的

我的页脚看起来像<p class = "footie"> Victoria University 2018 </p>

在css中

.footie {
  &:before {
    display: block;
    content: " ";
    clear: both;
  }
}

.footie {
  background: black;
  color: wheat;
}

Answer 1

在需要的地方使用clearfix？ https://v4-alpha.getbootstrap.com/utilities/clearfix/

或者你可以尝试：

footer {
  &:before {
    display: block;
    content: " ";
    clear: both;
  }
}

拿你的代码：

<div class="container">
  <div class="content-overlap">...</div>
  <div class="image-overlap">...</div>
</div>
<div style='display: block; clear: both;'></div>