HTML 如下：
<div class="parent">
<div class="block"></div>
</div>
复制代码想要块级元素居右往往设置 margin-right: 0 属性是行不通的
下面介绍五种方法，不同场景适用不同方法
使用 margin 属性
.block{
margin-left: auto;
}
复制代码将 margin-left 设为 auto 后, 元素左边的 margin 会被尽可能的撑大, 所以自然就把元素挤到右边去了
使用 position 属性
.parent{
position: relative;
}
.block{
position: absolute;
right: 0;
}
复制代码使用 position 定位, 绝对能把元素放到右边去.
使用 float 属性
.block{
float: right;
}
复制代码使用 float 浮动将元素浮动到右边.
使用 text-align 属性
.parent{
text-align: right;
}
.block{
display: inline-block;
}
复制代码将块设为行内元素,然后父元素使用 text-align: right; 是块到右边.
使用 flex 属性
.parent{
display: flex;
justify-content: flex-end;
}
复制代码将父元素变为弹性容器, 然后将 justify-content 设为 flex-end, 那么容器中的弹性元素会从右开始排列.文章来源：https://www.toymoban.com/news/detail-412072.html
原文链接：https://juejin.cn/post/6985480302030225415文章来源地址https://www.toymoban.com/news/detail-412072.html
到了这里，关于CSS 系列 -- 块级元素靠右的实现方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
