BFC的理解和margin重叠的理解

最新推荐文章于 2023-02-27 01:18:52 发布

不吃素的pig

最新推荐文章于 2023-02-27 01:18:52 发布

阅读量631

点赞数

分类专栏： css 文章标签： BFC BFC的理解 margin margin的重叠块级格式化上下文

本文链接：https://blog.csdn.net/qq_38892710/article/details/98631771

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在理解BFC之前，先了解一个margin重叠（合并）

margin重叠（合并）：

块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin 合并”。

发生重叠前提条件：

1、普通文档流中的块级元素（不包括行内、浮动、绝对定位元素）

2、只发生在垂直方向

//css部分
*{
   margin:0;
   padding:0;
   font-size:18px;
   font-weight: bolder;
 }
//header和main发生margin重叠
header{
   height:50px;
   background: yellow;
   margin-bottom: 20px;
 }
main{
   margin-top:20px;
   height:100px;
   width:100%;
   background: pink;
}
//由于left和right浮动并且是水平方向的margin所以没有发生margin重叠
.left{
   float:left;
   margin-right:20px;
   width:200px;
   height:200px;
   background:green;
 }
.right{
   float:left;
   margin-left:20px;
   width:200px;
   height:200px;
   background:purple;
 }

margin重叠（合并）场景：

1、相邻兄弟元素 margin 重叠（合并）。

2、父级和第一个/最后一个子元素。

//css部分
ul{
    background:yellowgreen;
    margin-top:20px;
    /* margin-bottom:20px; */
}
li{
    height:50px;
    background-color: gray;
    margin-top:20px;
    /* margin-bottom:20px; */
}
.test{
    height:50px;
    background-color: pink;
}

//html部分
<ul>
   <li>第一行</li>
   <li>第二行</li>
   <li>第三行</li>
</ul>
<div class="test">test</div>

当设置为margin-bottom时

对于第二种场景如何阻止：

margin-top合并（以下一种就可）：

父元素设置为块级格式化上下文（BFC）元素；

父元素设置 border-top 值；

父元素设置 padding-top 值；

父元素和第一个子元素之间添加内联元素进行分隔（不推荐）。

margin-bottom合并（以下一种就可）：

父元素设置为块级格式化上下文（BFC）元素；

父元素设置 border-bottom 值；

父元素设置 padding-bottom 值；

父元素和最后一个子元素之间添加内联元素进行分隔（不推荐）；

父元素设置 height、min-height 或 max-height。

margin重叠意义：

p、ul、h2等标签都是有默认的margin值，如果没有外边距重叠，则文章段落之间布局之间的边距则是两倍。

（图来自-精通CSS：高级Web标准解决方案（第2版））

margin合并的计算规则：

1、正正取最两者大值

2、正负值取两者相加值

3、负负取绝对值最大的那个

BFC

BFC 全称为 block formatting context，中文为“块级格式化上下文”。

具有 BFC 特性的元素的子元素不会受外部元素影响，也不会影响外部元素。

BFC布局规则：

具有BFC特性的元素包含其他子元素，里面的布局会按照子元素自身的属性来布局，普通流就按照普通流，浮动就按照浮动，绝对定位就按照绝对定位。

在同一个BFC的会发生margin重叠。

触发BFC条件：

<html>根元素；
float的值不为none；
overflow 的值为 auto、scroll 或 hidden；
position 的值为absolute、fixed；
display 的值为 table-cell、table-caption 和 inline-block 中的任何一个

BFC作用：

去除margin重叠

在上面举的例子中往父元素ul添加overflow:hidden，便能防止外边距重叠，如下图

清除float影响

由于子元素设置float属性，导致父元素的高度塌陷

//css部分
.test{
  float:left;
  width:100%;
  height:200px;
  background-color:gray;
}

//html
<div class="wrap">
   <div class="test"></div>
</div>

往父级wrap加上overflow:hidden

由于浮动，会导致浮动的元素脱离普通文档流不占据空间，所以会漂浮在占空间的元素上。

//css部分
.test{
   float:left;
   width:200px;
   height:200px;
   background-color:gray;
}
.test2{
    height:400px;
    width:400px;
    background-color: pink;
}

//html部分
<div class="test"></div>
<div class="test2"></div>

往test2加上overflow:hidden，就可清除float的影响，如图

能自适应布局

任何 BFC 元素与 float 元素相遇的时候，都可以实现自动填充的自适应布局。

//css部分
.test{
   float:left;
   width:200px;
   height:200px;
   background-color:gray;
}
.test2{
   height:300px;
   background-color: pink;
   overflow: hidden;
}

//html部分
<div class="test"></div>
<div class="test2"></div>

参考：

张鑫旭：CSS世界

精通CSS：高级Web标准解决方案（第2版）

不吃素的pig

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC的理解和margin重叠的理解

在理解BFC之前，先了解一个margin重叠（合并）margin重叠（合并）：块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin 合并”。发生重叠前提条件：1、普通文档流中的块级元素（不包括行内、浮动、绝对定位元素）2、只发生在垂直方向//css部分*{ margin:0; ...
复制链接

扫一扫