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;  
    } 
    在程序媛的路上,越走越用劲儿:)
  • 相关阅读:
    python异常触发及自定义异常类
    python for i in range(x)应用的问题
    季羡林 暮年沉思录
    再谈python的list类型参数及复制
    Python 列表推导式
    JavaScript:垃圾数据是如何自动回收的?
    JavaScript:this的用法
    JavaScript:浅谈闭包及其回收原则
    ES6:async / await ---使用同步方式写异步代码
    五大主流浏览器与四大浏览器内核
  • 原文地址:https://www.cnblogs.com/AliceX-J/p/4919642.html
Copyright © 2011-2022 走看看