CSS浮动与流体布局

(内容参照张鑫旭老师的慕课教程)

1. 文字环绕衍生-单侧固定

==描述==： 左侧固定宽度，右侧自适应
==实现==： 左侧固定元素设置width + float;右侧元素给予与width数值对应的margin-left\padding-left正值
==评价==： 在原本float的文本环绕效果上添加margin-left或padding-left
==实现==：
        * {
            margin: 0px;
            padding: 0px;
        }
        .left {
            width: 200px;  /*必须*/
            height: 200px;
            float: left;    /*必须*/
            background-color: red;
        }
        .right {
            margin-left: 200px; /*必须*/
            background-color: yellow;
        }
        <div class="left"></div>
        <div class="right">
            我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字
            我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字
            我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字
            我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字
            我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字
            我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字
        </div>

拓展： 两个div，顺序严格按照前面的设置右浮动，后面的设置margin-right即可实现右侧固定左侧自适应

2.DOM与显示位置匹配的单侧固定布局

**描述**：右侧固定，左侧自适应
**实现**： 左侧元素宽度100% + float:left,右侧元素固定width + 对应宽度数值的margin-left负值 + float:left
**评价**： 1.上面的拓展已经实现了这种布局。
       2.尽管该种方案可行，但最终效果是左侧元素最右边的一部分会被右侧元素覆盖的bug，故不推荐使用
**实现**：
`
    * {
        margin: 0px;
        padding: 0px;
    }
    .left {
        width: 100%;
        height: 100px;
        float: left;
        background-color: red;
    }
    .right {
        width: 100px;
        height: 100px;
        float: left;
        margin-left: -100px;  /*padding-left 无效*/
        background-color: yellow;
    }
    <div class="left">
        我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字
        我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字
        我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字
        我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字
        我是一大片文字我是一大片文字我是一大片文字我是一大片文字我是一大片文字
    </div>
    <div class="right">5555</div>
    
拓展：此种方案BUG解决办法，在.left中设置box-sizing:border-box; padding-right: 100px;

3.高级进化-智能自适应尺寸

**描述**： 左右两侧均自适应
**实现**： 左侧浮动 + 右侧display:table-cell与width:无限大
**评价**： 左侧内容如果过多且不给宽度会把右侧内容挤到第二行。。。耐人寻味
**实现**： 
            .left {
                height: 100px;
                float: left; /*必须*/
                background-color: red;
            }
            .right {
                background-color: yellow;
                height: 100px;
                display: table-cell; /*必须*/
                *display: inline-block; 
                width: 20000px; /*必须*/
                *width: auto; 
            }
            <div class="left">
                一大片文字
            </div>
            <div class="right">
                这么多文字这么多文字这么多文字这么多文字这么多文字这么多文字这么多文字
                这么多文字这么多文字这么多文字这么多文字这么多文字这么多文字这么多文字
            </div>