Asp.net mvc5页脚显示在页面顶部

Question

我在尝试在asp.net网页上显示详细信息时遇到了一些麻烦。我正在尝试在页面的左侧显示详细信息，并且还能够在页面的右侧创建项目。我正在使用创建部分的部分视图并使用以下html

ViewLift

<style>
        #details {
            float:left;
        }

        #LiftRequest-dialog{
            float:right;
        }
    </style>

然后是以下css

.windows()

然而，尽管由于某种原因它们左右显示我的应用程序的页脚显示在它们上方。页脚是_Layout页面中的默认页脚。是我试图以错误的方式摆出它们的方式，还是有人能告诉我为什么在没有我改变它的情况下页脚移动了？

Answer 1

您需要clearfix。创建一个CSS样式定义，如：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

然后，将此类应用于浮动元素的父级：

<div class="clearfix">
    <div id="FloatedElement1"></div>
    <div id="FloatedElement2"></div>
</div>

<div id="Footer"></div>

基本上，这里发生的是浮动元素从正常文档流中删除。同时，页脚是流程的一部分，因为它显然没有任何其他成功，所以一路走到顶端。然后它试图“包裹”浮动元素周围，但由于没有足够的水平空间，所以那些浮动从线下降，最终落在它下面。 clearfix使浮动元素周围的“包装器”本身成为文档流的一部分，用于将元素推送到页面后面，即页脚。