css 之 float 时给父元素 加 overflow: hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css" media="screen">
        .button-list{
            padding: .1rem;
            overflow: hidden
        }  
        .button-wrapper{
            width:33.33%;
            float: left
        }
        .button{
            padding: .1rem;
            border: .02rem solid #ccc;
            text-align: center
        }  
    </style>
</head>
<body>
    <div>123</div>
    <div class="button-list">
        <div class="button-wrapper">
            <div class="button">
                北京
            </div>
        </div>
        <div class="button-wrapper">
            <div class="button">
                北京
            </div>
        </div>
        <div class="button-wrapper">
            <div class="button">
                北京
            </div>
        </div>
    </div>
    <div>123</div>
</body>
</html>

相关推荐