zoukankan      html  css  js  c++  java
  • 清除浮动元素的margin-top失效原因(更改之前的错误)

     

    //样式代码
    body,div
    { margin:0; padding:0; } .box1{ background:#900; width:200px; height:200px; margin:20px 0 0 20px; float:left; } .box2{ background:#009; width:300px; height:200px; margin:20px 0 0 20px; float:left; } .box3{ background:#099; width:520px; height:200px; margin:20px 0 0 20px; clear:left; }
    //html中的代码
    <
    div class="box1"></div> <div class="box2"></div> <div class="box3"></div>

     在所有的浏览器中都是如下图所示,box3的margin-top失效

     

    原因:查找clear属性是如何清除浮动的

    clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。摘自 w3school 

    当clear应用于非浮动块时,它将元素的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致外边距折叠不起作用。摘自MDN

    当clear应用于浮动元素时,它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局,后面的浮动元素的位置无法高于它之前的元素

    代码如下:

    <div class="box1">box1</div>  
    <div class="box2">box2</div>  
    <div class="box3">box3</div>  
    body,div{  
        margin:0;  
        padding:0;  
        font-size: 20px;
        font-weight: bold;
    }  
    .box1{  
        background:#900;  
        width:200px;  
        height:200px;  
        margin:20px 0 0 20px;  
        float:left;  
    }  
    .box2{  
        background:#009;  
        width:300px;  
        height:200px;  
        margin:20px 0 0px 20px;  
        float:left; 
        clear:left;  /*清除浮动元素*/ 
    }  
    .box3{  
        background:#099;  
        width:520px;  
        height:200px;  
        margin:20px 0 0 20px;  
        float:left;  
    } 
    在程序媛的路上,越走越用劲儿:)
  • 相关阅读:
    我的第一个作业
    团队任务3:第一次冲刺
    课后作业3:个人项目(词频统计及其效能分析)
    课后作业2:个人项目
    一切的开始,从未有过的改变——课后作业1:准备
    Fiddler 添加IP显示、响应时间功能
    Jmeter所有结果分析
    云盘资源爬取利器 fmv
    python 中的 sys , os 模块用法总结
    Python 编写登录接口
  • 原文地址:https://www.cnblogs.com/AliceX-J/p/4919642.html
Copyright © 2011-2022 走看看