右浮动div换行现象的原因

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了右浮动div换行现象的原因相关的知识,希望对你有一定的参考价值。

右浮动div换行现象的原因:
当然右浮动出现div换行的原因是多种多样的,下面就介绍一个初学者比较容易出现的一个错误。
代码实例:

<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:200px;
  height:100px;
  background:blue;
}
#right{
  float:right;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>

在上面的代码中,第二个浮动的div出现了换行的现象。
很多朋友以为右边的div是浮动的,可以位于第一个div的右边不会出现换行,其实这是错误的,因为第一个div要单独占据一行,所以尽管第二个div是浮动的,那么也会出现换行现象。只要把第一个div设置为左浮动,那么两个div就会在一行出现了。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15669

更多内容可以参阅:http://www.softwhy.com/divcss/

以上是关于右浮动div换行现象的原因的主要内容,如果未能解决你的问题,请参考以下文章

跨度在 div 内浮动 - 为啥在 IE 中换行?

在容器中居中 2 个 div(向左、向右浮动)

div+css里面左浮动 右浮动 到底是啥意思??

div+css里面左浮动 右浮动 到底是啥意思??

UL和浮动DIV:列表文本换行但背景颜色不换行

CSS那些事儿-阅读随笔3(清除浮动)