Question

为什么这样显示？

body {
  margin: 0 200px;
}

h1 { font-size: 16px; }

<h1>hi</h1>
<h1 style="float: left">hello</h1>
<h1 style="float: right">BYE</h1>
<h1>THIS IS A NEW LINE PLEASE</h1>

我只需要显示它即可。这从未发生过。我没有头绪

Answer 1

我认为您正在寻找clear property，它将元素放在任何浮动元素之后。

<div style="margin: 0 200px">
    <h1>hi</h1>
    <h1 style="float: left">hello</h1>
    <h1 style="float: right">BYE</h1>
    <h1 style="clear: both">THIS IS A NEW LINE PLEASE</h1>
</div>

Answer 2

请尽量避免浮动。 Flexbox有很多解决此问题的聪明方法

.floatwrap {
  display: flex;
  flex-wrap: row;
  justify-content: space-between;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body style="margin: 0 200px">
    <h1>hi</h1>
  <div class="floatwrap">
    <h1>hello</h1>
    <h1>BYE</h1>
  </div>

    <h1>THIS IS A NEW LINE PLEASE</h1>
</body>
</html>

HTML元素未相应显示。为什么会这样呢？

2 个答案: