CSS Float:clear 不适用于相对位置

Question

Float:clear 不适用于周围有相对位置的元素。

我试过将浮动元素放在 div 中，更改父元素的显示类型。它没有按预期方式工作。

我试图避免子元素 2 与元素 2 重叠。

我的研究未能显示出使上述两者协同工作的正确方法。

感谢任何指导。

的截图

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 90%;
  //height: 550px;
  margin: auto;
  background-color: lightgrey;
  margin-top: 15px;
  border-radius: 15px;
}
.mainheader {
  width: 100%;
  height: 125px;
  border-radius: 15px;
  background-color: black;
}
.menu {
  height: 30px;
  background-color: seagreen;
  position: relative;
  top: 95px;
}
.main {
  float: left;
  padding: 10px;
  width: 70%;
  background-color: lightyellow;
  //display: none;

}
.main img {
  display: inline-block;
  float: left;
  margin: 12px;
  width: 100px;
  border-radius: 15px;
}
aside {
  float: left;
  /*width: 30%;
    height: 40px;*/
  background-color: lightyellow;
  //display: none;
  width: 30%;
  text-align: center;
  //outline: 1px blue solid;
  //padding-bottom: 30px;
  position: relative;
  top: 30px;
}
.sidebar {
  //outline: 1px gold solid;
  //height: 350px;

  /*position: relative;
  top: 30px;*/
}
.cdiv article {
  padding: 10px;
}
.content1 {
  //border-radius: 15px;
  //border: 1px red solid;

}
.content2 {
  width: auto;
  background-color: pink;
  //border-radius: 15px;
  //border: 1px red solid;

}
body .container .body aside .cdiv {
  height: 100px;
  width: 90%;
  //margin-bottom: 10px;
  background-color: yellow;
  //border-radius: 10px;
  display: inline-block;
}
footer {
  clear: both;
  width: 100%;
  height: 40px;
  background-color: red;
}

<!DOCTYPE html>
<html>
<title>MyHome</title>
<link rel="stylesheet" type="text/css" href="style.compact.css">

<body>
  <div class="container">
    <div class="mainheader">
      <div class="header"></div>
      <div class="menu"></div>
    </div>
    <div class="body">
      <div class="main">
        <div class="cdiv content1">
          <img src="placeholder.jpg" alt="My logo">
          <article>
            <h2>My Site</h2>
            <p>This is a test paragraph. This was supposed to be a long paragraph let see how this turns out. I have tried making as long as possible. But who is gonna type so much.</p>
            <br>
            <p>this is was test of new line lets find out how it works</p>
            <br>
            <p>This is a test paragraph. This was supposed to be a long paragraph let see how this turns out. I have tried making as long as possible. But who is gonna type so much.</p>
          </article>
        </div>
        <div class="cdiv content2">
          <article>
            <h3>My Site</h3>
            <p>This is a test paragraph. This was supposed to be a long paragraph let see how this turns out. I have tried making as long as possible. But who is gonna type so much.</p>
            <br>
            <p>this is was test of new line lets find out how it works</p>
            <br>
            <p>This is a test paragraph. This was supposed to be a long paragraph let see how this turns out. I have tried making as long as possible. But who is gonna type so much.</p>
          </article>
        </div>
      </div>
      <aside>
        <div class="sidebar">
          <div class="cdiv content3">
            <div class="title"></div>
            <div class="text"></div>
          </div>
          <div class="cdiv content4">
            <div class="title"></div>
            <div class="text"></div>
          </div>
          <div class="cdiv content5">
            <div class="title"></div>
            <div class="text"></div>
          </div>
          <div class="cdiv content6">
            <div class="title"></div>
            <div class="text"></div>
          </div>
        </div>
      </aside>
    </div>
    <footer></footer>
  </div>
</body>

</html>

Answer 1

如果您使用相对位置，则使用边距而不是顶部。因此，您可以更改此 css，它将正常工作。除了 { 保证金-top:30px; /不top:30px;/}

CSS Float:clear 不适用于相对位置

CSS Float:clear is not working with relative position

css

position

css-position

css-float