任务11—代码2的一点感悟

作者: mint9602 | 来源:发表于2017-02-11 16:42 被阅读6次

代码overflow: hidden;虽然能使main块形成BFC，同时清除兄弟元素aside的浮动影响 (但是不能使用margin-left使其偏移)

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
    .wrap {
        width: 900px;
        background-color: #f00;
        margin: 0 auto;
    }
    .aside {
        width: 300px;
        height: 500px;
        float: left;
        background-color: #00f;
    }
    .main {
        width: 580px;
        overflow: hidden;
        background-color: #ff0;
        margin-right: 20px;
    }
</style>
</head>
<body>
    <div class="wrap">
        <div class="aside"></div>
        <div class="main">这里是Main这里是Main这里是Main这里是Main这里是Main这里是Main这里是Main这里是Main这里是Main这里是Main这里是Main这里是Main这里是Main这里是Main这里是Main</div>
    </div>
</body>
</html>

Paste_Image.png