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

请先看两个布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        #left 
        {
            margin-right: 100px;
        }
        #right 
        {
            width: 100px;
            float: right;
        }
    </style>
</head>
<body>
    <body>
        <div id="parent">
            <div id="right" style='height: 100px;background-color: #0f0;'>右列定宽</div>
            <div id="left" style='height: 100px;background-color: #f00;'>左列自适应</div>
        </div>
    </body>
</body>
</html>

效果如下：

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

下一个布局时这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        #left 
        {
            margin-right: 100px;
        }
        #right 
        {
            width: 100px;
            float: right;
        }
    </style>
</head>
<body>
    <body>
        <div id="parent">
            <div id="left" style='height: 100px;background-color: #f00;'>左列自适应</div>
            <div id="right" style='height: 100px;background-color: #0f0;'>右列定宽</div>
        </div>
    </body>
</body>
</html>

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

可以说布局已经失效了。

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

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

来源：oschina

链接：https://my.oschina.net/u/2542875/blog/1784828

标签

浮动

布局