Почему текст, содержащийся в div, который следует за плавающим div, появляется не на своем месте?

Question

У меня есть 4 деления в следующем порядке: #header, #content, #navigation, # footer.

#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, и в этом сценарии мое понимание состоит в том, что не-плавающий блок уровня с именем «навигация» переместится на место левого плавающего блока «контент». Текст «NAVIGATION» внутри div с идентификатором «navigation» не прячется за #content div и вместо этого появляется внутри #footer div.

После прохождения этого вопроса Текст в плавающем div Я узнал, что содержание в следующем div будет плавать вокруг этого перемещенного div.

Теперь, когда этот #content div имеет ширину всего 75%, почему текст NAVIGATION не появляется рядом с #content div? Почему он появляется внутри #footer div?

Answer 1

display: inline-block - лучший способ использовать float

inline-block лучше, чем float, причина в том, что использование метода float не подходит для макета вашей страницыпотому что CSS-свойство float изначально предназначалось только для обтекания текста вокруг изображения и по дизайну не подходит для общих целей макета страницы

Йо может сделать это, сначала удалите

float: left;

в #content и добавление

отображение: встроенный блок;

и добавление

дисплей: встроенный блок;

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