外边距塌陷之clearance_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:15:03
Original
1098 people have browsed it

在一个BFC中,垂直方向上相邻的块级盒子产生外边距塌陷,本文要说一个特殊的外边距塌陷情况,即当垂直方向上,两个块级盒子之间有个浮动元素相隔时,这个时候会产生什么样的效果呢?

.outer{        overflow: auto;        width: 300px;        height: 500px;        border: 2px solid #6666FF;    }    .box{        width: 100px;        height: 100px;        font-family: "simhei";        }    .top{        margin-bottom: 20px;        background: #CC6600;    }    .float{        /*float: left;*/浮动部分被注释掉了    }    .bottom{        margin-top: 10px;            background: #33FF66;    }
Copy after login
<div class="outer">        <div class="top box">top</div>        <div class="float"></div>        <div class="bottom box">bottom</div>    </div>
Copy after login

效果图:

Paste_Image.png

然后我把中间的div设置一下:

.float{        float: left;        margin-bottom: 10px;        background: #9900CC;        width: 50px;        height: 50px;    }
Copy after login
<div class="float">float</div>
Copy after login

效果如图:

Paste_Image.png

可知:浮动元素不会影响后续块级盒子与前面块级盒子的外边距塌陷。但当我们利用bottom清除浮动时

.bottom{        margin-top: 10px;            background: #33FF66;        clear: both;    }
Copy after login

效果图:

Paste_Image.png

可知:使用清除浮动属性的元素,它的外边距塌陷规则变成如下规则:闭合浮动的盒子的border-top始终和浮动元素的margin-bottom底部重合。而在闭合浮动的盒子的margin-top上方,直到top盒子的margin-bottom底部这段距离,就是我们所说的clearance。验证:

  1. 给浮动元素加上margin-top
    .float{     float: left;     margin-top: 10px;     margin-bottom: 10px;     background: #9900CC;     width: 50px;     height: 50px; }
    Copy after login

Paste_Image.png

2.调整浮动元素的高度和margin

.float{        float: left;        margin-top: 5px;        margin-bottom: 5px;        background: #9900CC;        width: 50px;        height: 5px;    }    .bottom{        margin-top: 20px;            background: #33FF66;        clear: both;    }
Copy after login

效果图:

Paste_Image.png

此时bottom元素的margin-top和top元素的margin-bottom重合了5px。此时clearance的值是-5px。通过上面两个验证,我们就可以知道有浮动元素时,闭合浮动元素的clearance是怎么计算的了。一个基本原则就是闭合浮动的元素的border-top与浮动元素的margin-bottom重合

对浮动元素的理解

另外,从上面的验证2中我们也可以总结出,浮动元素与border,padding这样的屏蔽外边距塌陷的属性不同,浮动元素是脱离文档流的,所以当浮动元素没有大到足以分开BFC中的相邻盒子时,相邻盒子的垂直margin还是会重叠的。

参考资料:

http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template