向左浮动在我的页脚中不起作用，因此无法正确显示内联

Question

我正在我的一个页面上测试页脚，以便我可以将它放在每个页面上，但它不能正确显示。目前，页脚 div 中的 div 都堆叠在一起，而不是彼此相邻。此外，div 仅显示应该显示的图像的一部分，而不是整个图像。我也不确定如何通过屏幕尺寸滑动来适当地进行这些更改，因为 div 不会都是统一的尺寸，但应该总是占据屏幕的整个宽度。我的 CSS 是：

.page{
    height: 100%;
    width: 100%;
    text-align: center;
    }
    .bgood-footer{
        width:100%;
        height: 20%;
        position: fixed;
        bottom: 0;
    }
    .mobile-app{
        float: left;
        background-image: url('../images-source/mobile-app.png');
        background-repeat: no-repeat;
    }
    .talk{
        float: left;
        background-image: url('../images-source/talk-to-us.png');
        background-repeat: no-repeat;
    }
    .careers{
        float: left;
        background-image: url('../images-source/careers.png');
        background-repeat: no-repeat;
    }
    .press{
        float: left;
        background-image: url('../images-source/press.png');
        background-repeat: no-repeat;
    }
    .blank{
        float: left;
        background-image: url('../images-source/blank.png');
        background-repeat: no-repeat;
    }
    .fb{
        float: left;
        background-image: url('../images-source/fb.png');
        background-repeat: no-repeat;
    }
    .yt{
        float: left;
        background-image: url('../images-source/yt.png');
        background-repeat: no-repeat;
    }
    .tw{
        float: left;
        background-image: url('../images-source/tw.png');
        background-repeat: no-repeat;
    }
    .ig{
        float: left;
        background-image: url('../images-source/ig.png');
        background-repeat: no-repeat;
    }
    .ordering-loc{
        float: left;
        background-image: url('../images-source/ordering-loc.png');
        background-repeat: no-repeat;
    }

我的 HTML 是：

<div class="page">
  <div class="bgood-footer">
    <a href="/mobile-app">
      <div class="mobile-app">Mobile Application</div>
    </a>
    <a href="/talk-to-us">
      <div class="talk">Talk To Us</div>
    </a>
    <a href="/careers">
      <div class="careers">Careers</div>
    </a>
    <a href="/press">
      <div class="press">Press</div>
    </a>
    <div class="blank"></div>
    <a href="https://www.facebook.com/bgood">
      <div class="fb">FB</div>
    </a>
    <a href="https://www.youtube.com/user/unclefaris">
      <div class="yt">YT</div>
    </a>
    <a href="https://twitter.com/b_good_">
      <div class="tw">TW</div>
    </a>
    <a href="https://twitter.com/b_good_">
      <div class="ig">IG</div>
    </a>
    <div class="ordering-loc">Ordering From Location</div>
  </div>
</div>

Answer 1

这是因为您没有使用 clearfix。我查看了您的代码，但重复次数太多，我不想粘贴占位符来查看它的实际外观。根据您的描述，您的部分问题在于没有正确清除而漂浮。当您浮动元素时，您必须修复父后缀，因为浮动会破坏应用于块元素的自然块堆叠顺序。

我再重复一遍……将 clearfix 添加到 PARENT。 https://css-tricks.com/snippets/css/clear-fix/

您的第二个问题是您的页脚中的所有这些部分都在显示没有指定宽度的图像。因为我不知道这些图像很难说什么，但是如果您要展示这样的画廊，我的建议是，裁剪照片，使它们的大小都相同。添加

img{
width:100%;
}

到你的CSS顶部，

最后，您可以为页脚项目应用最大宽度和宽度值，以使其保持响应。 （确保它们不超过 100%）。我的意思是，页脚的所有小部分都可以是 width:10%;所以当它们排成一行时，所有的宽度都会增加到 100%（这不考虑边距和填充，所以要小心）

如果您希望我修改代码，请添加占位符图片，或将您的图片上传到图片托管网站，以便我可以在屏幕上看到它的样子。

更新：我添加了您的占位符图像并为您的 div 添加了宽度。这是您更新后的 css

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

.page{
    height: 100%;
    width: 100%;
    text-align: center;
    }
    .bgood-footer{
        width:100%;
        height: 20%;
        position: fixed;
        margin:0 auto;
        bottom: 0;
    }
    .mobile-app{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png-app.png');
        background-repeat: no-repeat;
    }
    .talk{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.pngo-us.png');
        background-repeat: no-repeat;
        width:120px;
    }
    .careers{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.pngs.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .press{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .blank{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .fb{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .yt{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .tw{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .ig{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .ordering-loc{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
width:200px;
    }