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

代码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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,809评论 1 92
  • 一、BFC是什么? 它是 Block Formatting Context (块级格式化上下文) 的简称,接下来通...
    07120665a058阅读 3,826评论 15 40
  • 这篇文章极好,以至于让我受益良多,就一字没有改动的转发过来一丝冰凉老师的文章 需要注意的是,display:tab...
    新晋小牛牛阅读 1,073评论 0 2
  • 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征: 浮动元素会脱离正常的文档流,元...
    饥人谷_哈噜噜阅读 897评论 0 0
  • 让你见识一下,语文版数学题! 加法运算: ( )言为定+( )鸣惊人=( )全其美 ( )亲不认+( )触即发=(...
    赛德传播阅读 446评论 0 0