是否有一个 CSS 相当于 float: down

Question

我想知道是否有某种 CSS 等同于：

float: down;

或某种方式使元素或 div 转到页面底部。感谢任何帮助。

Answer 1

使用 flexboxes，您可以将子元素设置为 align-self: flex-end。

Example Here

.parent {
    display: flex;
}
.child {
    align-self: flex-end;
}

.parent {
    height: 200px;
    border: 5px solid #000;
    display: flex;
}
.child {
    height: 40px;
    width: 100%;
    background: #f00;
    align-self: flex-end;
}

<div class="parent">
    <div class="child">
        Align to the bottom
    </div>
</div>

或者，您必须使用 absolute/fixed 定位。

Example Here

.align-bottom {
    position: absolute;
    bottom: 0;
}

在某些情况下，您还必须相对定位父元素，以便绝对定位与其相对。

body {
    min-height: 100vh;
}
.align-bottom {
    position: absolute;
    bottom: 0;
}

<div class="align-bottom">Align to the bottom</div>

Answer 2

你可以这样设置：

bottom: 0;
position: fixed;

我想你也会喜欢它的：

z-index: 9999;

以上所有内容一起将使元素粘在底部，即使您滚动页面也是如此。

是否有一个 CSS 相当于 float: down

Is there a CSS equivalent to float: down

css

css-float