html浮动的定义,HTML元素的定义顺序对1栏固定1栏浮动布局的影响

请先看两个布局：html

Document

#left

{

margin-right: 100px;

}

#right

{

width: 100px;

float: right;

}

右列定宽

左列自适应

效果以下：布局

这是一个普通的一栏固定，一栏浮动的布局。没有什么特别的。ui

下一个布局时这样的：code

Document

#left

{

margin-right: 100px;

}

#right

{

width: 100px;

float: right;

}

左列自适应

右列定宽

这个布局的style标签内容和上一个同样，可是效果不同：htm

能够说布局已经失效了。it

这个两个布局的不一样在于id为left和right的这两个元素定义的顺序不一样。若是先定义固定的right元素，再定义浮动的left元素，那么布局是成功的，就像第一张图那样。但若是顺序反过来，就会像上图那样。class

我猜测这可能和渲染的机制有关，先生成固定宽度的元素，才能让后定义的浮动元素来“适应”它。渲染