请先看两个布局: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
我猜测这可能和渲染的机制有关,先生成固定宽度的元素,才能让后定义的浮动元素来“适应”它。渲染