Question

css中两个div并排排列，宽度之和大于父div的宽度，怎么办？

在百度文库的一片文章里，http://wenku.baidu.com/view/d83bba6648d7c1c708a1455a.html 第12页，其中提到用clear属性，可以使两个div排列在同一行，而不会由于宽度之和大于父div而被挤到下一行，但是自己照着写了并没有这样的效果。请问是怎么回事？

Answer 1

建议买本书看，熟练了，明白一些原理后再去翻网上的技巧学习提高，先不要一来就开始看网上的教程...你懂的，半罐水写的教程多多，很多本身就是错的。

<div>
<p>浮动1</p>
<p>浮动2</p>
</div>

div{width: 99px;}
p{width: 50px;line-height: 30px;}

如果 css 是上面这样的话，两个 p 宽度超过父级了必须换成两行，你加什么都没用；
正确的方法是父 div 的 99px 改为 100px 或以上才能在同一排容纳这两个 p；

clear 是拿来清理浮动的，而不是解决浮动元素总宽度超过父宽度换行问题的，只能说这个作者在放屁。

你尝试把上面 css 中 div 宽度改成100px，并且给 div 加条个红色背景。然后到 Firefox 或 CH、OP、WK 等浏览器下面去看，你的 div 的红色背景在哪儿？你将看不到整个红色背景的 div 区域在高度上完整的包裹住那两个 p。

因为 float 浮动后，实际上也是把 p 从文档流里面拖出来了，父 div 就失去了范围焦点。而 clear 清除浮动作用之一就是拿来解决这个问题：让父 div 正确的包裹浮动子元素，而不是你看那个教程说那样。

IE 下微软的程序员画蛇添足的解决了这个问题，如果你没用 clear 或其他方式清理浮动，ie 会自己帮你搞定这个父级高度上无法包含浮动子元素的问题。但是现在不是 ie 一家独大了，大多数时候你浮动了元素都应该养成习惯清理浮动。

清理浮动方法有几种，请自行百度补脑。

Answer 2

这里大部分是发模型的，技术你可以去另外一个吧，cs:source吧，里面是专发技术的

Answer 3

position属性试试
clear一般用于消除浮动
默认div是行排列
你要竖着就要float

Answer 4

用table标签 把两个<div>放在同一个<tr>下的两个<td>标签中 （比较笨的方法。。）