bfc与margin折叠问题

来源：互联网发布：java jdk for mac下载编辑：程序博客网时间：2024/06/10 21:41

边距折叠

边距折叠只会发生在上下边距，左右边距是不会发生折叠的
边距折叠只发生邻接的上下边距中，也即兄弟节点或者父子节点
发生边距折叠的两个节点必须同处于一个bfc布局中
发生边距折叠的两个父子节点没有border或者padding隔开
只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框- 或绝对定位之间的外边距不会合并。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        body{            padding: 0;            margin: 0;        }        .d1{            height: 100px;            width: 1000px;            background: red;            margin: 10px        }        .d2{            height: 100px;            width: 1000px;            background: blue;            margin: 10px;            display: inline-block;        }    </style></head><body>    <div class="d1"></div>    <div class="d2"></div></body></html>

这里写图片描述

将行内块换成浮动块：

.d2{    height: 100px;    width: 1000px;    background: blue;    margin: 10px;    display: inline-block;}

这里写图片描述

bfc

bfc的作用:

两列布局
通过使父元素bfc化，清楚内部浮动
通过使元素处于不同的bfc布局中，防止margin合并
包裹浮动的元素和margin，使内部元素不影响元素本身的margin和其他的元素的布局

bfc的形成:

根元素，即HTML元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

0 0