javascript - 为什么我的图像没有 float 在段落旁边？

Question

我以图像为例，因为我已经找到了如何使它过渡并淡入下一个图像(不确定为什么不对这些图像执行此操作)。但是，当我在我的文本编辑器中运行代码时，图像确实发生了变化，但我的图像和容器都漂浮在顶部而不是旁边，并且在我创建转换后的图像之前，它漂浮在图像的一侧(但仍然没有包裹所有完全绕过它的方式)。

我做错了什么？

window.onload = function slow() {
  document.getElementsByClassName("tracy")[0]
    .style.opacity = 0;
  var tracy1 = document.createElement("img");
  tracy1.src = "http://i.imgur.com/1yiEfva.jpg";
  tracy1.style.width = "175px";
  tracy1.style.height = "220px";
  tracy1.style.opacity = 0;
  tracy1.style.float = "left";
  tracy1.style.marginLeft = "10px";
  tracy1.className = "fade-img";
  document.getElementsByClassName("img-container")[0]
    .appendChild(tracy1);
  setTimeout(function() {
    tracy1.style.opacity = 1;
  }, 0);
}

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
}

header,
nav,
section,
aside,
footer,
article {
  display: block;
}

body {
  background-color: #eae8e9;
}

.container {
  margin: 0px auto;
  background-image: url(back.png);
  background-size: cover;
  width: 1300px;
  padding-top: 10px;
  height: 100%;
}


/* The main Content Section*/


/* TMAC PIC */

.tracy {
  float: left;
  margin-right: 10px;
  margin-left: 10px;
}

.img-container {
  float: left;
  height: 220px;
  position: relative;
}

.fade-img {
  transition: opacity 1s ease-out;
  position: absolute;
  top: 0;
  left: 0;
}


/* Tmac Pic */

.main {
  background-color: #f7f4f4;
  margin-right: 480px;
  margin-left: 20px;
  box-shadow: 10px 10px 10px #1f2963;
  border-radius: 12px;
  padding-bottom: 20px;
  overflow: auto;
}

.tmacLogo {
  position: relative;
  top: 12px;
  left: 10px;
}

hr {
  margin-bottom: 10px;
}

.main h1 {
  text-align: center;
  background-color: white;
  padding-bottom: 10px;
  color: #3f3c3c;
  text-shadow: 2px 3px 2px #ff2b4b;
  font-size: 40px;
  letter-spacing: 2.5px;
}

.main p {
  padding-top: 2px;
  padding-left: 5px;
}

<div class="main">

  <h1 onmouseover="changeStyle()">T-Mac <img src="tmaclogo.png" alt="TmaC" width="55px" height="42px" class="tmacLogo" /></h1>
  <hr style="color:red;">

  <div class="img-container">
    <img src="http://i.imgur.com/eH85WzA.jpg" alt="TmaC" width="175px" height="220px" onclick="slow()" class="tracy fade-img" />
  </div>

  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
    including versions of Lorem Ipsum.</p>

</div>

<li class="thead" onclick="slow()"><a href="#">News</a></li>

View on JSFiddle

这就是我所说的:

Answer 1

您已将 position: absolute 应用于 img，这将它从 DOM 中的正常元素流中移除，因此相邻元素将不再受到影响img 的定位。如果您删除该定位，一切都会按预期 float 。 https://jsfiddle.net/y5md2weu/5/