CSS是前端开发中必备的技能之一。其中，水平居右是我们在页面布局中常常会用到的一种样式。下面介绍几种CSS的元素水平居右的方式。

/* 1. 使用float属性 */
.right {
float: right;
}
/* 2. 使用position和right属性 */
.right {
position: absolute;
right: 0;
}
/* 3. 使用text-align属性 */
.parent {
text-align: right;
}
.child {
display: inline-block;
}
/* 4. 使用flexbox布局 */
.parent {
display: flex;
justify-content: flex-end;
}
.child {
margin-left: auto;
}

以上四种方法都可以实现元素水平居右，具体使用哪种方法需根据不同的情况来决定。例如，如果只是想让一些图片水平居右，推荐使用第一种方法。如果需要实现固定导航栏，可以使用第二种方法。第三种方法适用于使一段文字或者一个按钮水平居右。第四种方法是使用了CSS3的flexbox布局，适用于复杂布局。