Question

Float：clear不能处理周围相对位置的元素。

我尝试将float元素放在div中，更改父元素的显示类型。它不能按预期的方式工作。

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

我的研究未能显示正确的方法，使上述两个工作在一起。

感谢任何指导。

以下是sample reference

的屏幕截图

＆＃13;

* {
  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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

如果您使用的是位置关系，则使用保证金而不是顶部。所以你可以改变这个CSS，它会正常工作。一边{margin-top：30px; / NOT top：30px; /}

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

1 个答案: