清除浮动元素的margin-top失效原因（更改之前的错误）

最新推荐文章于 2021-06-19 17:28:25 发布

转载最新推荐文章于 2021-06-19 17:28:25 发布 · 433 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/AliceX-J/p/4919642.html

本文深入探讨CSS中浮动元素的布局原理，解释clear属性如何影响元素位置及外边距折叠现象，通过实例代码展示浮动与清除的具体效果。

//样式代码
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;  
}

转载于:https://www.cnblogs.com/AliceX-J/p/4919642.html