外边距塌陷之clearance_html/css_WEB-ITnose-html教程-PHP中文网

外边距塌陷之clearance_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:15:03

原创

1344人浏览过

在一个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;    }

登录后复制

<div class="outer">        <div class="top box">top</div>        <div class="float"></div>        <div class="bottom box">bottom</div>    </div>

登录后复制

效果图：

影像之匠PixPretty

商业级AI人像后期软件，专注于人像精修，色彩调节及批量图片编辑，支持Windows、Mac多平台使用。适用于写真、婚纱、旅拍、外景等批量修图场景。

206

查看详情

Paste_Image.png

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

.float{        float: left;        margin-bottom: 10px;        background: #9900CC;        width: 50px;        height: 50px;    }

登录后复制

<div class="float">float</div>

登录后复制

效果如图：

立即学习“前端免费学习笔记（深入）”；

Paste_Image.png

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

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

登录后复制

效果图：

Paste_Image.png

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

给浮动元素加上margin-top

.float{     float: left;     margin-top: 10px;     margin-bottom: 10px;     background: #9900CC;     width: 50px;     height: 50px; }

登录后复制

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;    }

登录后复制

效果图：

Paste_Image.png

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