一个关于css中margin-right没有效果的问题

今天在群聊中，一位朋友遇到了一个关于CSS的疑难问题，具体是关于`margin-right`属性似乎不生效的问题。他贴出了自己的CSS代码和HTML代码，内容如下：

CSS代码：

```css

.style1 {

width: px;

height: 440px;

background-color: red;

border: 5px solid silver;

margin-top: 20%;

margin-right: 30%;

}

```

HTML代码：

```html

```

我复制了他的代码，并换了一张图片进行测试，但确实如他所言，`margin-right`属性似乎没有发挥作用。

开始我猜测是不是`margin-top`影响了`margin-right`的效果，或者属性的书写顺序有问题？但经过尝试，这些想法都被证明是错误的。

回想起在W3Schools对`margin-right`的学习，以及我的一些模糊记忆，浏览器默认是左对齐的。这让我灵机一动，`margin-right`其实是有效的，只是在标准流的情况下不太明显。那如果能脱离标准流呢？

我马上在CSS文件中加入了`float:right;`，再次测试时，`margin-right`的效果就显现出来了。不过使用`float:left;`是无效的，这与默认情况类似。

关于`right`属性无效的原因：`right`属性只有在元素的`position`属性为`absolute`时才会生效，而默认情况下，元素的`position`值是`static`，此时`right`属性是无效的。建议大家在开发过程中，如果不是很必要，尽量避免使用`right`属性。