详解css使既有浮动又有左右margin的多个元素两端

<style type="text/css">
{marg: 0;paddg: 0;}
.contaer{
    width: 1300px;
    marg: 0 auto;
    background-color: #f90;
}
.header{
    width: 1000px;
    height: 40px;
    marg: 0 auto;
    background-color: #eee;
}
.ma{
    width: 1000px;
    marg: 0px auto; 
    background-color: #f60;
}
        
.box{
    /给.box设置左右marg为负的就是为了冲突掉最左边元素的marg-left和最右边元素的marg-right/
    marg: 0 -1.6666667%;
}
.box::after,
.box::before{display: table;content: " ";}
.box::after{clear: both;}
.item{
    width: 30%;
    height: 200px;
    marg: 20px 1.6666667%;
    background-color: #f10;
    float: left;
}
</style>

<div class="contaer">
<div class="header">狼蚁网站SEO优化的元素会与我对齐</div>
    <div class="ma">
        <div class="box">
            <div class="item">我是第1个div元素</div>
            <div class="item">我是第2个div元素</div>
            <div class="item">我是第3个div元素</div>
            <div class="item">我是第1个div元素</div>
            <div class="item">我是第2个div元素</div>
            <div class="item">我是第3个div元素</div>
        </div>    
    </div>
</div>