9月底面试问题。

1，问题，用html写出下面的布局，要求顶部的高度一定，中间左侧的宽度一定，底部的高度一定。

   

  .container {
            position:relative;
            margin:0px;
            padding:0px;
        }
        .top {
            height:100px;
            width:100%;
            border:1px solid red;
        }
        .content {
            overflow:hidden;
            width:100%;
        }
            .content .left {
                float:left;
                width:200px;
                border:1px dotted blue;
                height:300px;
            }
            .content .right {
                margin-left:200px;
                border:1px solid green;
                height:400px;
                
            }
        .buttom {
            clear:both;
            height:100px;
            width:100%;
            border:1px solid red;
        }

<div class="container">
        <div class="top"></div>
        <div class="content">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="buttom"></div>
    </div>

笔试时自己写时，将中间右侧的.right也添加了float:left;width:99%; 本意想着右侧添加width：99%；右侧将会充满整个屏，再加个margin-left：200px会将其往右拉200px已达到效果。实际结果是添加他们后右侧真个页面有一部分超出了页面，并且右侧的页面靠右跑到下面去了.

百度了一下，又测试了下，发现如果仅设置右侧的float：left，不设置宽度，右侧会津贴左侧，且没有宽高。 若设置float：left且设置width。如果左侧的宽度加右侧的宽度小于屏幕的宽度，则右侧会紧贴左侧排列。如果这两侧的宽度大于屏幕的宽度。则右侧页面会移到左侧页面下方。相当于重新开始一行。

总结了下：float属性作用于块状元素，副作用是使块状元素的宽度高度为0。如果一层添加float：left，则该层就会向左移动直到遇到边框，填充，边界或者另一个块对象的边缘为止。 div是块级元素，display：block，宽度会充满整个屏。

 另附一个地址：http://jo2.org/css-auto-adapt-width/