如何将加粗的“紫水晶”向左移动？

Question

如何将紫水晶移至页面左侧？我尝试使用float：left，但是没有用。这是我的代码。感谢您的帮助！

body {
  background-color: mediumpurple;
}

nav {
  border: 1px solid black;
}

.navclass {
  padding-right: 10px;
}

.amethyst-paragraph {
  float: left;
  width: 400px;
}

.amethyst {
  height: 200px;
  width: 300px;
  float: right;
}

<h1>Crystal Healing</h1>

<strong>Amethyst</strong>
<p class="amethyst-paragraph">aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaa
  aaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaa.</p>
<img src="http://hibiscusmooncrystalacademy.com/wp-content/uploads/2012/04/amethyst-cluster.jpg" class="amethyst">

Answer 1

只需将其设为一个段落。不需要浮动。

body {
  background-color: mediumpurple;
}

nav {
  border: 1px solid black;
}

.navclass {
  padding-right: 10px;
}

.amethyst-paragraph {
  width: 400px;
}

.amethyst {
  height: 200px;
  width: 300px;
  float: right;
}

<h1>Crystal Healing</h1>
<p><strong>Amethyst</strong></p>
<p class="amethyst-paragraph">aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaa
  aaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaa.</p>
<img src="http://hibiscusmooncrystalacademy.com/wp-content/uploads/2012/04/amethyst-cluster.jpg" class="amethyst">