为什么在一个浮动的div后面的div中包含的文本会出现错位？

Question

​

我有4个div的顺序：#标题，#内容，#导航，#页脚。

​

#header {
  background: lightblue;
  height: 10%;
  border: 1px solid black;
}

#content {
  background: green;
  opacity: 0.5;
  width: 74%;
  float: left;
  height: 80%;
  border: 1px solid black;
}

#navigation {
  background: brown;
  height: 80%;
  width: 24%;
  text-align: center;
  border: 1px solid black;
}

#footer {
  background: hotpink;
  height: 10%;
  border: 1px solid black;
}

body,html {
  height:100%;
  margin:0;
}

 <div id="header">DEFAULT</div>
  <div id="content">FLOAT</div>
  <div id="navigation">NAVIGATION</div>
  <div id="footer">CLEAR</div>

​

我正在学习css，在这种情况下，我的理解是，名为“导航”的非浮动块级div将取代左侧浮动的div "content“。div中id为“导航”的文本“导航”并没有隐藏在#content div后面，而是出现在#footer div中。

在通过这个问题Text in floated div之后，我了解到下面的div中的内容将围绕这个浮动的div浮动。

既然这个#content div只有75%宽，为什么导航文本没有出现在#content div旁边呢？为什么它会出现在#footer div中？

Answer 1

显示:内嵌块是使用浮动块的更好方法

内联块比浮动更好，使用float方法不适合页面布局的原因是因为float CSS属性最初仅用于在图像周围环绕文本，在设计上并不最适合常规页面布局目的

你可以做到这一点，首先删除

float:左；

在#content和add中

显示:内嵌式模块；

并添加

显示:内嵌式模块；

​

#header {
  background: lightblue;
  height: 10%;
  border: 1px solid black;
}

#content {
  background: green;
  opacity: 0.5;
  width: 74%;
  display: inline-block;
  height: 80%;
  border: 1px solid black;
}

#navigation {
  background: brown;
  height: 80%;
  width: 24%;
  display: inline-block;
  text-align: center;
  border: 1px solid black;
}

#footer {
  background: hotpink;
  height: 10%;
  border: 1px solid black;
}

body,html {
  height:100%;
  margin:0;
}

<div id="header">DEFAULT</div>
<div id="content">FLOAT</div>
<div id="navigation">NAVIGATION</div>
<div id="footer">CLEAR</div>

​