浮动的特性 - 爱码网

一.浮动的特性
　　1.浮动的元素脱标

　　2.浮动的元素互相贴靠

　　3.浮动的元素由"字围"效果

　　4.收缩的效果
前提是标准文档流，margin的垂直方向会出现塌陷问题。
如果盒子居中：margin: 0 auto;如果盒子浮动了，margin: 0 auto;就不起任何作用
需求：让浮动的盒子居中
　　给浮动盒子，加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子margin: 0 auto;

.box{
    width: 400px;
    height: 300px;
    background-color: red;
}
.main{
    width: 100px;
    overflow: hidden;
    margin: 0 auto;
}
.child{
    width: 100px;
    height: 100px;
    background-color: green;
    margin: 0 auto;
    float: left;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 400px;
            height: 300px;
            background-color: red;
        }
        .main{
            width: 100px;
            overflow: hidden;
            margin: 0 auto;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0 auto;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="main">
            <div class="child">
            
            </div>
        </div>
    </div>
    
</body>
</html>

浮动的盒子居中