html - 浮动 css 问题与其他部分重叠

Question

每当我使用 css 中的浮点数运行此程序时，应该保持在浮点数部分下方的其他部分与浮点数部分重叠。我应该怎么做才能解决这个问题？

header {
  background: yellow;
  border-width: 5px;
  border-color: brown;
  border-style: double;
  border-radius: 10px;
  box-shadow: aquamarine 5px 5px 10px, aquamarine -5px -5px 10px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: rgb(86, 235, 86) 5px 5px 5px, rgb(86, 235, 86) -5px -5px 5px;
}

header h2,
h3,
h4,
h5,
h6 {
  display: none;
}

div.Float {
  background: red;
}

.Font_tags {
  width: 50%;
  background: sienna;
  border-width: 3px;
  border-style: solid;
  border-color: blueviolet;
  margin-top: 25px;
  padding: 5px;
  float: left;
}

.image_links {
  border-width: 5px;
  border-color: blue;
  border-style: dotted;
  margin-top: 25px;
  padding: 5px;
  width: 40%;
  float: right;
  text-align: center;
}

img,
video,
audio {
  width: 400px;
}

footer {
  text-align: center;
  clear: both;
  position: relative;
  height: 200px;
  margin-top: -200px;
}

.form {
  border: 5px solid rebeccapurple;
}

<header>
  <h1 class="heading1">heading 1</h1>
  <h2 class="heading2">heading 2</h2>
  <h3 class="heading3">heading 3</h3>
  <h4 class="heading4">heading 4</h4>
  <h5 class="heading5">heading 5</h5>
  <h6 class="heading6">heading 6</h6>
</header>
<div class="Float">
  <section class="Font_tags">
    <h3>Lorem ipsum dolor sit amet.</h3>
    <p>
      <u>Underline</u> <b>Bold</b> <i>Italic</i> <strong>Strong</strong> <small>Small</small> <br> The old price is <del>$250</del> & the new price is <ins>$200</ins> <br> (a+b)
      <sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup><br> Water= H<sub>2</sub>O <br>
      <q>This is a quote</q> <br>
      <blockquote>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, quibusdam!
      </blockquote>
    </p>
  </section>
  <section class="image_links">
    <img src="picture.jpg" alt="image">
    <figcaption>This is a image</figcaption>
    <hr>
    <video src="PUBG MOBILE_2020-05-20-11-23-49.mp4" controls autoplay muted></video>
    <hr>
    <audio src="music1.mp3" controls autoplay muted></audio>

  </section>
</div>
<div class="table-form">
  <section class="form_table">
    <div class="form">
      <form method="GET" action="">
        <input type="text" placeholder="Text"><br>
        <input type="password" placeholder="password"><br>
        <input type="email" placeholder="email"><br>
        <input type="week"><br>
        <input type="file"><br>
        <input type="submit" value="Log in">
        <input type="checkbox">One<br>
        <input type="checkbox">Two<br>
        <input type="checkbox">Three<br>
        <input type="checkbox">Four<br>
      </form>
    </div>
  </section>
</div>
<footer>
  <p>Copyright merin @2020</p>
</footer>

标签： htmlcss