Question

为什么浮动的DIV还要有先后顺序

div 布局时出现一个疑问：既然浮动的元素是脱离正常文档流，为什么写代码时，还先写哪个，效果还不一样呢？例如：
<div id="side_right">side</div>
<div id="side_left"></div>
<div id="main"></div>,
前两个分别是右、左浮动，第三个不浮动，是液体自动宽度的，我现在想把main放在其他两前面，发现显示不对，请帮忙解释一下

Answer 1

若有左、中、右三栏，左栏和右栏div必须在中栏之前出现。这样才可以让这两个边栏浮动到它们的位置上（屏幕两侧），并让中栏的 内容将“流”入它们之间的空间。如果浏览器在一个或者两个边栏div之前先发现中栏，那么中栏将占据屏幕的一侧或者两侧，这样浮动的部分就会跑到中栏的下 面而不是中栏的旁边了。
若有顺序出现的两栏div1和div2，若div1设置属性clear:right，则div2不会被阻止浮动在div1的右边，只有当div2设置属性clear:left时，div2才能到div1的下面位置。

追问

谢谢，那请问，如何做到将内容页面先显现呢，我记得有教材说是为了便于用户体验，需要将内容页先行显示给用户的。

追答

两个都右浮动你试试看看，是不是你想要的结果！

Answer 2

你好，DIV浮动时不加z-index样式属性时，会自动根据浮动的顺序，最后一个在最上层的。

所以我们在写样式时都要加Z-index来区别出哪个要浮在最上层。而Z-index的值越大层会在最上面。如:
<div id="side_right" style="z-index:1;">side</div>
<div id="side_left" style="z-index:2;"></div>
<div id="main" style="z-index:3;"></div>

这样你要的层就在最上面了。希望我的回答对你有帮助。

Answer 3

若有左、中、右三栏，左栏和右栏div必须在中栏之前出现。这样才可以让这两个边栏浮动到它们的位置上（屏幕两侧），并让中栏的 内容将“流”入它们之间的空间。如果浏览器在一个或者两个边栏div之前先发现中栏，那么中栏将占据屏幕的一侧或者两侧，这样浮动的部分就会跑到中栏的下 面而不是中栏的旁边了。
若有顺序出现的两栏div1和div2，若div1设置属性clear:right，则div2不会被阻止浮动在div1的右边，只有当div2设置属性clear:left时，div2才能到div1的下面位置。

Answer 4

若有左、中、右三栏，左栏和右栏div必须在中栏之前出现。这样才可以让这两个边栏浮动到它们的位
置上（屏幕两侧），并让中栏的 内容将“流”入它们之间的空间。如果浏览器在一个或者两个边栏div之前先发现中栏，那么中栏将占据屏幕的一侧或者两侧，这样浮动的部分就会跑到中栏的下 面而不是中栏的旁边了。
若有顺序出现的两栏div1和div2，若div1设置属性clear:right，则div2不会被阻止浮动在div1的右边，只有当div2设置属性clear:left时，div2才能到div1的下面位置。

Answer 5

解决方案1：
左浮动，效果还不一样呢;div>>div id="，为什么写代码时;div id=",
前两个分别是右;<div>：既然浮动的元素是脱离正常文档流;
<<，我现在想把main放在其他两前面;
<div 布局时出现一个疑问，还先写哪个，发现显示不对？例如;div>/div id=">main"：
<side_right"/，第三个不浮动;>/;side<，是液体自动宽度的;side_left"
解决方案2：
有左，若div1设置属性clear，则div2不会被阻止浮动在div1的右边，div2才能到div1的下面位置、中。这样才可以让这两个边栏浮动到它们的位置上（屏幕两侧），并让中栏的 内容将“流”入它们之间的空间、右三栏，左栏和右栏div必须在中栏之前出现:right。如果浏览器在一个或者两个边栏div之前先发现中栏。
若有顺序出现的两栏div1和div2，只有当div2设置属性clear:left时，那么中栏将占据屏幕的一侧或者两侧，这样浮动的部分就会跑到中栏的下面而不是中栏的旁边了