简单的布局套路

Float 布局

给子元素加上float:left
给父元素加上clearfix

 .clearfix::after{
            content: ‘‘;
            display: block;
            clear:both;
        }

Flex 布局

给父元素加上 display:flex;
给父元素加上 justify-content:space-between;

发现两个Flex 小游戏（感觉好脑残）不过挺适合新人学习的：
http://flexboxfroggy.com/#zh-cn
http://www.flexboxdefense.com/

简单的布局：做定位的的元素上面不要加任何属性，需要加属性，在它里面做，bug最少。

<head>
    <style>
        .parent{
            background: #A9A9A9;
            min-width: 600px;
            width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }
        .zuzong{

            width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }
        .child:nth-child(1){
            background:    #00FFFF;
            float: left;
        }

        .child:nth-child(2){
            float: right;
        }
        .logo{
            text-align: center; /*文字水平居中*/
            width: 60px;
            height:30px;
            line-height: 30px;  /*单行文本居中，行高和高相等*/
            margin:5px;
        }
        .clearfix::after{
            content: ‘‘;
            display: block;
            clear:both;
        }
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        ul{
            list-style: none;
        }
        ul > li{
            float:left;
            margin:0 0 0 10px ;
            line-height: 24px;
            padding-top: 8px;
            padding-bottom:8px;
        }

        .banner{
            background: #DCDCDC;
            height: 300px;
            width: 800px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
        }
        .pictures{      /*定位用的，居中*/
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        .pictures > .xxx {
            margin: 0 -4px; /*负margin 加在父元素身上，margin为负表示向外拉伸。其外面有一个定位用的子元素*/
            display: flex;
            flex-wrap: wrap;
            background: red;
        }
        .picture{
            width:calc(25% - 8px);/*calc在父元素的宽度上乘上25%，在减去8px，得到最终的宽度*/
            height: 194px;
            background: #DEB887;
            margin: 4px;
        }
    </style>
</head>
<body>
<div class="zuzong">
    <div class="parent clearfix">
        <div class="child">
            <div class="logo">LOGO</div>
        </div>
        <div class="child">
            <ul class="clearfix">
                <li>导航1</li>
                <li>导航2</li>
                <li>导航3</li>
                <li>导航4</li>
                <li>导航5</li>
            </ul>
        </div>
    </div>
    <div class="banner"></div>
    <div class="pictures">
        <div class="xxx">
            <div class="picture"></div>
            <div class="picture"></div>
            <div class="picture"></div>
            <div class="picture"></div>
            <div class="picture"></div>
            <div class="picture"></div>
            <div class="picture"></div>
        </div>
    </div>
    </div>
</body>

1、单栏布局

<style>
    .wrap{
      background:gray;
    }
    .lyout{
      max-width:800px;
      margin:0 auto;
    }
    .header{
      height:50px;
    }
    .middle{
      height:300px;
      background:green;
    }
    .footer{
      height:50px;
    }
</style>
  <div class="wrap">
    <div class="lyout header">eee</div>    
  </div>
    <div class="lyout middle">eee</div>
  <div class="wrap">
    <div class="lyout footer">eee</div>    
  </div>

2、两栏布局

<style>
    .content{
        height:300px;
    }
    .left{
        background:red;
        height:inherit;
        width:100px;
        float:left;
    }
    .main{
        background:green;
        height:inherit;
        margin-left:120px;
    }
    .footer{
        height:50px;
        background:gray;
        margin-left:120px;
    }
</style>
<div class="content">
    <div class="left">aside</div>
    <div class="main">main</div>
</div>
<div class="footer">footer</div>

3、三栏布局

<style>
    .content{
        height:300px;
    }
    .left{
        background:red;
        height:inherit;
        width:100px;
        float:left;
    }
    .right{
        background:blue;
        height:inherit;
        width:100px;
        float:right;
    }
    .main{
        background:green;
        height:inherit;
        margin:0 120px
    }
    .footer{
        height:50px;
        background:gray;
        margin:0 120px
    }
</style>
<div class="content">
    <div class="left">aside</div>
    <div class="right">aside</div>
    <div class="main">main</div>
</div>
<div class="footer">footer</div>