一个大div，包着4个小div

示例一：

#box{
    width:600px;
    height:600px;
    background: deeppink;
    /*在不设置宽高的情况下，让父类可以感知子类的高度*/
    /*overflow:hidden;*/
    /*float: right;*/
}
#box>div:first-child{  /*外面div里面的第一个div*/
    width:200px;
    height:200px;
    background: green;
    /*左浮动，会被遮住*/
    float:right;
}
#box>div:nth-child(2){ /*里面的第二个div*/
    width:200px;
    height:200px;
    background: aqua;
    float:right;
}
#box>div:nth-child(3){
    width:200px;
    height:200px;
    background: red;
    float:right;
}
#box>div:last-child{
    width:400px;
    height:400px;
    background: #000;
    /*清楚两边浮动*/
    clear: both;
    /*设置该元素左浮动*/
    /*float:left;*/
}

<div id="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

示例二：

.header_left>div:first-child{
    float:left;
}
.header_left>div:last-child{
    float:right;
}
/*设置头部内容样式*/
.header_left>div{ /*旗下的所有div都是这个属性*/
    float:left;
    /*background: red;*/
    line-height:40px; /*设置成与大div一样，这样文字就是垂直居中的了*/
    color:#8492A6;
}
.header_left>div>span{
    font-weight:bold; /*加粗，与b标签是一个效果*/
}
.header_left>div:nth-child(2)>a,.header_left>div:nth-child(2)>a>img{ /*设置div下面的a和img的属性*/
    color:#8492A6;
}
.header_left>div:nth-child(2)>a>img{  /*设置div下面的img的另一个属性*/
    width:20px;
}

<div class="header_left">
    <div> <!--第一个子div-->
        <span>IT</span>-精品学习网
    </div>
    <div> <!--第二个子div-->
        <a href="">
            <img src="./img/cptub.png" alt="">
            核心产品
            <i class="icon-icon-test iconfont"></i>
        </a>
    </div>
</div>

示例三：

.content_bottom_right>div>div{ /*那八个小div的样式*/
    width:210px;
    height:260px;
    /*border:1px solid #ccc;*/
    float:left; /*设置浮动*/
    margin-left: 8px; /*互相之间有空隙*/
}

示例四：

#box_content>div:first-child>div:first-child{
    border:2px solid #fff;
    background: green;
    position: absolute;
    font-size:14px;
    color:#fff;
    border-radius:10px;
    padding: 2px 5px;
    left:-10px;
    top:5px;
}

示例五：

还可以并且写多个：

.header_right>ul>li,.header_right>ul>li>a,.header_right>ul>li>a>img{ /*小内容靠左*/
    float:left;
}

示例六：

除了div，其他标签也可以写父子形式：

.header_right>ul>li:first-child{
    padding-right: 0px;
    padding-top:10px;
}