• 浮动

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动布局</title>
    <style>
    .box{
       overflow: hidden;
    }
    .box1 {
        float: left;
        background: red;
        width: 20%;
        height: 80px;
    }
    .box2 {
        float: right;
        background: blue;
        width: 80%;
       height: 180px;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

    效果：两\多列布局优劣与选择_布局

    代码量少，能够轻松实现多列布局（父元素高度坍塌那都不叫事）。但是，无法实现各列高度自适应，设置多列宽度后，剩下一列宽度无法自适应,而且浮动原本不是用来布局的，他是用来实现文字环绕图片来着。而且无法通过父元素设置text-align:center,使得子元素居中显示，浮动是紧贴顶部的。无法设置vertical属性进行设置垂直对其方式。

    使用场景：早期布局神器，但是很多地方需要设置绝对值,导致无法自适应，或者在设置百分比的时候容易导致布局错乱

    案例：w3c官方文档

  • 绝对定位

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位布局</title>
    <link rel="stylesheet" href="css/install.css">
    <style>
    .box {
        position: relative;
    }
    
    .box1 {
        background: red;
        width: 20%;
        height: 80px;
    }
    
    .box2 {
        position: absolute;
        display: inline-block;
        background: blue;
        width: 80%;
        height: 180px;
        top: 0px;
        left: 20%;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

    效果：两\多列布局优劣与选择_布局_02

    高宽都不能自适应，而且position具有破坏性，脱离了文档流，具有遮罩特性。一般用作弹出层。京东、淘宝、天猫首页商品都有使用，一般不用来布局

  • display:inline-block

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display:inline-block</title>
    <link rel="stylesheet" href="css/install.css">
    <style>
    .box{
       overflow: hidden;
       font-size: 0px;
    }
    .box1 {
        display: inline-block;
        background: red;
        width: 20%;
        height: 80px;
        font-size: 20px;
        text-align: center;
        vertical-align: top;
    }
    .box2 {
        display: inline-block;
        background: blue;
        width: 80%;
        height: 180px;
        font-size: 20px;
        text-align: center;
        vertical-align: top;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
</body>
</html>

    效果：两\多列布局优劣与选择_布局_03

    没有浮动的烦恼，可以设置各列垂直水平对其，inline-block元素之间有html空白,而且inline-block元素沿着默认的基线对齐，会出现在各种奇形怪状的高度，可以通过vertical-align或者line-height进行设置

  • display:table-cell

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位布局</title>
    <link rel="stylesheet" href="css/install.css">
    <style>
    .box {
        display: table;
        table-layout: fixed;
        width: 100%;
        text-align: center;
    }
    
    .box>div {
        display: table-cell;
    }
    
    .box1 {
        background: red;
        vertical-align: middle;
    }
    
    .box2 {
        background: blue;
        vertical-align: middle;
    }
    
    .box3 {
        background: yellow;
        vertical-align: middle;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">
            <p>box1</p>
            <p>box1</p>
        </div>
        <div class="box2">
            box2
        </div>
        <div class="box3">
           box3
        </div>
    </div>
</body>
</html>

    效果：两\多列布局优劣与选择_布局_04

    不需要清除各列之间的空白间隙，各列宽度可以根据外边框自适应都能做到可控，但是需要各个边距问题

  • display：flex

    未完待续..................