时间戳

首页 > 解决方案 > Why is text contained in div that follows a floated div appearing out of place?

css - Why is text contained in div that follows a floated div appearing out of place?

问题描述

enter image description hereenter image description hereI have 4 divs in this order : #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>

I am learning css, and in this scenario my understanding is that a non floated block level div named "navigation" will move in to take the place of a left floated div "content". The text 'NAVIGATION' inside of the div with id "navigation" is not hiding behind the #content div and is instead appearing inside of #footer div.

After going through this question Text in floated div I learnt that content in following div will float around this floated div.

Now since this #content div is only 75% wide, why is the NAVIGATION text not appearing right next to the #content div ? Why does it appear inside of the #footer div ?

标签： csscss-float

解决方案

display:inline-block 是使用浮点数的更好方法

inline-block 比 float 更好，使用 float 方法不适合页面布局的原因是，float CSS 属性最初只是为了让文本环绕图像，并且从设计上来说不适合一般页面布局目的

哟可以这样做，先删除

向左飘浮;

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

推荐阅读