新手请教：css中float的问题

wangqi060934 2010-11-02 12:04:40

代码如下，不太懂float的用法，不知道为什么right的样式被第一行的left覆盖了，但是right中的内容怎么在第二行？



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

html,body{

height:100%;

}

#left{

background-color:#cccccc;

border:2px solid #333333;

width:100px;

height:300px;

float:left;

}

#right{

background-color:#FF0000;

border:2px solid #333333;

height:300px;

width:100px;

}

</style>

</head>



<body>

<div id="left">1</div>

<div id="right">2</div>

</body>

</html>

...全文

123 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

karl2738 2010-11-03

打赏
举报

[Quote=引用 11 楼 wangqi060934 的回复:]
我想问的重点是为什么right中的样式和内容为什么分开？
[/Quote]

原理在5F写的很详细了

karl2738 2010-11-03

打赏
举报

[Quote=引用 10 楼 wangqi060934 的回复:]
引用 4 楼 ltj0532 的回复:

1、right的样式被第一行的left覆盖了；原因是因为#left拥有了float属性，始得#left脱离了文档流向左移动直到碰到父容器的左边缘为止，因为#left不再处于文档流中，所以它不占据空间；#right不具备float属性按文档流默认方式渲染就会被#lfet覆盖；

问题2、但是right中的内容怎么在第二行；当#left与#right容……
[/Quote]

解释的这么详细你还没看明白？你把我写的仔细的看一看，#right 不要设宽度看一看，然后再给个设宽度再看看，对比的看下你就明白了
还有就是你要明白：什么是文档流，什么是脱离文档流，弄明白浏览器对文档流的渲染模式；不明白这些基层的东西，光在视觉上找答案，你会走很多弯路；
买本书系统的学下html,css基础

thqtanghequn 2010-11-03

打赏
举报

你少写了个#right{float：left} 有必要写float在写个<div style="clear:both"></div>

咸魚先生 2010-11-02

打赏
举报

右边也要浮动，浮动后在IE6下会有两倍边界的问题，解决办法display:inline;或者overflow:hidden;都行

qingYun1029 2010-11-02

打赏
举报

顶 L S

karl2738 2010-11-02

打赏
举报

1、right的样式被第一行的left覆盖了；原因是因为#left拥有了float属性，始得#left脱离了文档流向左移动直到碰到父容器的左边缘为止，因为#left不再处于文档流中，所以它不占据空间；#right不具备float属性按文档流默认方式渲染就会被#lfet覆盖；

问题2、但是right中的内容怎么在第二行；当#left与#right容器拥有内容的时候，位置并没发生改变，只因为div是块级元素并且你给两个容器设置了宽度，同一行显示不下就到了第二行，你将#right的宽度去掉，就会看的更明白了，位置并没有发生改变，只是当拥有内容的时候，内容会紧随浮动元素之后;

wangqi060934 2010-11-02

打赏
举报

[Quote=引用 1 楼 zyujie 的回复:]

楼主，div是默认块元素，会独自占据一行，所以right移到了第二行，float属性，使用元素改变这种默认的显示方式，#right中float:left后right块就会和left块并排在同一行了！！！
[/Quote]
我想问的重点是为什么right中的样式和内容为分开？

wangqi060934 2010-11-02

打赏
举报

[Quote=引用 4 楼 ltj0532 的回复:]

1、right的样式被第一行的left覆盖了；原因是因为#left拥有了float属性，始得#left脱离了文档流向左移动直到碰到父容器的左边缘为止，因为#left不再处于文档流中，所以它不占据空间；#right不具备float属性按文档流默认方式渲染就会被#lfet覆盖；

问题2、但是right中的内容怎么在第二行；当#left与#right容器拥有内容的时候，位置并没发生改变，只因为d……
[/Quote]

还是没理解为什么right的内容和样式会分开？？？样式是对内容设定的，应该是一起的啊？