Div实现如图效果。。
摆渡老师(5678313) 15:52:38
是这样的。。。
你首先要理解什么是浮动。
摆渡老师(5678313) 15:52:44
也就是float
摆渡老师(5678313) 15:52:55
然后理解什么是块元素。
摆渡老师(5678313) 15:53:05
网页float是什么意思也就是display:block
摆渡老师(5678313) 15:53:42
一个块元素，比如DIV，是要独占一行的。
摆渡老师(5678313) 15:54:31
独占一行的意思，就是在这一行内，不可能再有空间放其它元素了。其它元素都将自动排位到该独占行的下一行。
摆渡老师(5678313) 15:54:38
这样说，你能明白吗？
摆渡老师(5678313) 15:55:17
那么，很显然，我们肯定有要求在一行内放多个元素的时候。
摆渡老师(5678313) 15:55:23
比如你刚刚的那个效果要求。
摆渡老师(5678313) 15:55:43
那个58按钮，和灰框。

摆渡老师(5678313) 15:56:31
很显然，如果58用DIV来做。灰框就必然要被挤到下一行去。不是咱们的效果。

摆渡老师(5678313) 15:56:39
怎么办？


摆渡老师(5678313) 15:56:46
这就说到了浮动float

摆渡老师(5678313) 15:58:16
float，浮动。意思是让应用了该样式的元素从文档流里面抽出来。让它不再占用原有的位置。元素一旦浮动，就必然向左或者向右“漂移”直到碰到父容器的边缘。
摆渡老师(5678313) 15:59:20
一个元素一旦float就自动变为display:block。所以，应用了float样式的元素，一定不要忘记给它宽高。

摆渡老师(5678313)  15:59:20
一个元素一旦float就自动变为display:block。所以，应用了float样式的元素，一定不要忘记给它宽高。

(229186983) 16:01:02
就是假如那个灰框用了float的话，就要给它加个width和height

勇往直前(171035493) 16:01:25
如果不要他是块级对象的话，那就给他一个display:inline;

摆渡老师(5678313) 16:01:34
就是那样的。只要float了。就必须给定宽高。
摆渡老师(5678313) 16:02:19
否则，我们刚刚不是说了吗？float后元素会自动变为display:block。也就是说，它也必须独占一行了啊。怎么办？display:inline.

DIV+CC<li_120@qq> 16:02:42
请教 display:inline.  代表的什么意思 什么情况下实用

摆渡老师(5678313) 16:02:48
对。勇往直前说得非常对。

(229186983) 16:02:56
内联

摆渡老师(5678313) 16:03:05
那么，display:inline又是什么东西？对了，内联元素。


勇往直前(171035493) 16:03:07
对，是内联元素。

摆渡老师(5678313) 16:03:07
内联。
摆渡老师(5678313) 16:04:00
内联又是啥？
内联就是失去外部样式。一行内展现。失去宽高。内联元素的宽和高将由其内容决定。
摆渡老师(5678313) 16:06:59
接上。。
有一个注意点，是一定要时刻牢记的。

摆渡老师(5678313) 16:07:31
那就是，浮动之后的元素，千万不要忘记清除浮动。否则，在它之后的元素，将不知道该到哪儿去显示。
DIV+CC<li_120@qq> 16:08:11
clear:both
勇往直前(171035493) 16:08:32
那是在他的下一个同级元素上加清除。

摆渡老师(5678313) 16:08:37
对了。
摆渡老师(5678313) 16:09:02
清除，就是clear
摆渡老师(5678313) 16:09:21
那么，clear应该和你浮动元素一致。


●︶ε︶(294854175) 16:09:23
那应该并不是每个float都要写clear吧

勇往直前(171035493) 16:09:26
不能又在这个元素上面又加浮动，又加清除，那就不会有任何效果了。
摆渡老师(5678313) 16:12:46
clear就是清除浮动。让元素再次回到文档流中去。
摆渡老师(5678313) 16:13:29
另外有一点要说明的是，当元素应用了float后，是从文档流中抽出来。默认地，会往左或右“漂移”到父容器的边缘。那么，距离边缘有多远呢？

  沈偷偷。(285483936) 16:15:58
不要把关门这个词级的太深了 就好像你写<div>之后你会写</div>
一样 你实用了float:left;之后你就记得写clear:both;
如果你写了<div>不写</div>下一个<div>就会出现问题一样。
摆渡老师(5678313) 16:16:14
<div id="header">
  <div >我是左浮动</div>
  <div >我是右浮动</div>
  <div ></div><!--这是清除,也就是我说的关门-->
</div>

勇往直前(171035493) 16:17:17
他的意思就是多给一个与浮动同级的DIV来关闭掉浮动。
天伦之乐←邪<tianxingjieyi@qq> 16:17:21
摆渡，应该直接告诉他们，不关门的话，会出现包围这些float的div。将不会被撑开。
让他们加背景颜，去看看效果

(229186983) 16:17:32
关门，float就是在div的最后面清除吗，不需要去css样式清除啊
勇往直前(171035493) 16:18:12
<div ></div>

勇往直前(171035493) 16:18:44
这个就是清除浮动的样式，只是写在页面上而已，没写到样式表上面去。

摆渡老师(5678313) 16:19:01
可以写到样式表中去。

(229186983) 16:20:05
昨天我做了个网页在ie里没问题，在ff里就变形了，后来也是在后面清除了才没事


摆渡老师(5678313) 16:20:05
养成开门关门的习惯，养成一旦有浮动就必然要有清除浮动的习惯。
这样，会给你减少很多莫名其妙的麻烦。

勇往直前(171035493) 16:20:20
我就是这样用了，一直都不能定义一个名称，今天才定义了一个名称，叫浮动关门。。。
呵呵。
摆渡老师(5678313) 16:21:24
还有一个小小的建议，在测试页面布局的时候，首先要测试的，是测试符合W3C标准的浏览器。比如FF

摆渡老师(5678313) 16:21:44
然后再测试特异型浏览器，诸如IE6.


摆渡老师(5678313) 16:22:05
说明，这只是我个人的建议。

摆渡老师(5678313) 16:22:17
我应用这套原则，减少了很多麻烦。

  沈偷偷。(285483936) 16:22:21
然后摆渡老师就会说 一般测试完FF IE8 IE7 IE6之后页面一般就不会有什么问题了。

摆渡老师(5678313) 16:22:46
呵呵。
(229186983) 16:24:17
摆渡老师继续啊，等的你说出个方法来呢



摆渡老师(5678313) 16:24:38
刚刚我写的例子，就是你要的啊。

●︶ε︶(294854175) 16:24:58
就是div+float
摆渡老师(5678313) 16:25:16
只不过是把float:right修改为float:left就行了

(229186983) 16:26:19
啊，那个问题就是直接弄一个div，然后在里面嵌入两个div形成左浮动和右浮动吗
●︶ε︶(294854175) 16:26:59
左浮动就可以了，右边的会自动靠过去
摆渡老师(5678313) 16:27:04
嗯。

(229186983) 16:27:08
如果这样的话就简单了，不过那个灰框上的字怎么办
摆渡老师(5678313) 16:27:43
字会随着框子走啊。不矛盾啊。
(229186983) 16:28:02
还是把那个灰框在样式里当做背景插入进去吗

摆渡老师(5678313) 16:28:13
嗯。

摆渡老师(5678313) 16:28:18
不错的方法。

●︶ε︶(294854175) 16:28:21
有图片插图片噻

摆渡老师(5678313) 16:28:24
不。
(229186983) 16:28:26