圣杯布局和双飞翼布局

<!--<!DOCTYPE html>
<html>
    <body>
        <style style="display:block" contentEditable>
            body { color: blue }
        </style>
    </body>
</html>-->

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Clear float</title>
    <style type="text/css">
        .Container{
            margin: 30px auto;
            width:600px;
            height: 300px;
        }
        .p{
            border:solid 3px #a33;
        }
        .c{
            width: 100px;
            height: 100px;
            background-color: #060;
            margin: 10px;
            float: left;
        }
@keyframes redLamp{
    0%{background-color: #999;}
    9.9%{background-color: #999;}
    10%{background-color: red;}
    40%{background-color: red;}
    40.1%{background-color: #999;}
    100%{background-color: #999;}
}
@keyframes yellowLamp{
    0%{background-color: #999;}
    39.9%{background-color: #999;}
    40%{background-color: yellow;}
    70%{background-color: yellow;}
    70.1%{background-color: #999;}
    100%{background-color: #999;}
}
@keyframes greenLamp{
    0%{background-color: #999;}
    69.9%{background-color: #999;}
    70%{background-color: green;}
    100%{background-color: green;}
}
#lamp,#lamp:before,#lamp:after{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #999;
    position: relative;
}
#lamp{
    margin: 0px auto;
    animation: yellowLamp 10s ease infinite;
}
#lamp:before{
    display: block;
    content: '';
    left: -100px;
    animation: redLamp 10s ease infinite;
}
#lamp:after{
    display: block;
    content: '';
    left: 100px;
    top: -100px;
    animation: greenLamp 10s ease infinite;
}
    .sector {
      width: 0;
      height: 0;
      margin: 0px auto;
      border-width: 50px;
      border-style: solid;
      border-color: #f00 transparent transparent;
      border-radius: 50px;
    }

    #floatBlockA{
        background-color: yellow;
    }
    #floatBlockB{
        background-color: green;
        overflow: hidden;
    }
    #floatBlockC{
        background-color: yellow;
        display: table;
        width: 100%;
    }
    #floatBlockD{
        background-color: green;
    }
    #floatBlockD:after{
        content: " ";
        display: block;
        clear: both;
    }
    .floatA{
        float: left;
        width:100px;
        height: 100px;
        background-color: red;
    }
    .floatB{
        float: right;
        width:100px;
        height: 100px;
        background-color: red;
    }
    .floatD{
        float: left;
        width:100px;
        height: 100px;
        background-color: red;
    }
    .clearB{
        clear: both;
    }

    .container{
        display: flex;
        margin: 30px auto;
        width: 100%;
        height: 200px;
        background-color: yellow;
    }
    .left{
        height: 200px;
        flex: 1;
        background-color: green;
    }
    .right{
        height: 200px;
        width: 300px;
        background-color: red;
    }
    .justify{
        height: 200px;
        flex: 1;
        background-color: blue;
    }

    .containerA{
        width: 100%;
        height: 200px;
        background-color: yellow;
    }
    .leftA{
        height: 200px;
        width: 200px;
        float: right;
        background-color: green;
    }
    .rightA{
        height: 200px;
        margin-right: 200px;
        background-color: red;
    }

    .containerB{
        position: relative;
        width: 100%;
        height: 600px;
    }
    .center{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: red;
        margin: auto;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
    }
    .containerC{
        display: flex;
        width: 100%;
        height: 600px;
        justify-content: center;
        align-items: center;
        border-top: 1px solid #000;
    }
    .centerC{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }

    /** 注意不要给该容器添加 100% 属性样式**/
    .box{
       padding: 20px 200px; 
       height: 300px;
    }
    /** 中间盒子 **/
    .item1{
       background-color: yellow;
       width: 100%;
    }
     /** 左边盒子 **/
    .item2{
       background-color: blue;
       width: 200px;
       margin-left: -100%;
       right: 200px;
    }
     /** 右边盒子 **/
    .item3{
       background-color: blue;
       width: 200px;
       margin-right: -200px;
    }
    .colums{
        height: 300px;
        float: left;
        position: relative;
    }
    /** 双飞翼布局 **/
    .bob{
        height: 300px;
    }
    .main{
        width: 100%;
        background-color: red;
    }
    .main-inner{
        margin: 0px 200px;
    }
    .sub{
        width: 200px;
        background-color: blue;
        margin-left: -100%;
    }
    .extro{
        width: 200px;
        background-color: blue;
        margin-left: -200px;
    }
    .item{
        float: left;
        height: 300px;
    }



    </style>
</head>
<body>
    <div class="Container">
        <div class="p">
            <div class="c"></div>
            <div class="c"></div>
            <div class="c"></div>
        </div>
    </div>
    <div id="lamp"></div>
    <div class="sector"></div>

    <!-- 解决div容器因为浮动导致的高度塌陷问题-->
    <!-- 第一种方法：添加空标签并设置属性为clear: both;
         优点：通俗易懂，容易掌握 
         缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的
     -->
    <div id="floatBlockA">
        <div class="floatA"></div>
        <div class="clearB"></div>
    </div>

    <!-- 第二种方法：给父容器添加overflow: hidden属性,实质是触发了BFC
         优点：不存在结构和语义化问题，代码量极少 
         缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；
     -->
    <div id="floatBlockB">
        <div class="floatB"></div>
    </div>

    <!-- 父元素设置 display:table, 触发了BFC 
         优点：结构语义化正确，代码少 
         缺点：盒模型属性已经改变。
      -->
    <div id="floatBlockC">
        <div class="floatB"></div>
    </div>

    <!-- 使用:after伪元素,需要注意的是 :after是伪元素（Pseudo-Element），不是伪类 
         优点：结构和语义完全正确，代码量居中 
         缺点：复用方式不当会造成代码量增加
      -->
    <div id="floatBlockD">
        <div class="floatD"></div>
    </div>

    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="justify"></div>
    </div>

    <div class="containerA">
        <div class="leftA">left</div>
        <div class="rightA">right</div>
    </div>

    <div class="containerB">
        <div class="center"></div>
    </div>

    <div class="containerC">
        <div class="centerC"></div>
    </div>

    <!-- 圣杯中-->
    <div class="box">
        <div class="item1 colums">中间盒子</div>
        <div class="item2 colums">左边盒子</div>
        <div class="item3 colums">右边盒子</div>
    </div>

    <!-- 双飞翼-->
    <div class="bob">
        <div class="main item">
            <div class="main-inner">中间盒子</div>
        </div>
        <div class="sub item">左边盒子</div>
        <div class="extro item">右边盒子</div>
    </div>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/aliwa/p/8627160.html