HTML/CSS -- 利用float进行页面布局

布局1： 高度已知，左边固定，右边自适应

当我们缩小浏览器窗口时，黄色自动缩小

    <section>
        <article>
            <style>
                .part2-content-wrap div {
                    height: 300px;
                }
                .part2-content-left {
                    width: 300px;
                    float: left;
                    background: red;
                }
                .part2-content-right {
                    width: 100%;
                    background: yellow;
                }
            </style>
            <div class = "part2-content-wrap"> 
                <div class = "part2-content-left"></div>
                <div class = "part2-content-right">
                    <h1>使用浮动方案解决</h1>
                    <p>高度已知，左边固定，右边自适应</p>
                </div>
            </div>
        </article>
    </section>

高度已知，右边固定，左边自适应同理可得！

 

布局2：高度已知，两边宽度已知，中间自适应