垂直方向margin重叠原因与解决方法

moven_j 发布于2019-08-30 15:54 / 625人阅读

摘要：我们经常写样式的时候会遇到垂直方向重叠的问题，如下代码可以看出由于，应该显示但是只显示，是什么原因呢这就涉及到什么是，解释为块级格式化上下文一个元素要创建，则满足下列的任意一个或多个条件即可的值不是。

我们经常写样式的时候会遇到垂直方向margin重叠的问题，如下代码：

    


    
        first p
        second p

可以看出由于margin-top:20px;margin-bottom:20px，应该显示40px但是只显示20px，是什么原因呢？这就涉及到BFC

什么是BFC：Block Fromatting Context，解释为块级格式化上下文

一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

1、float的值不是none。（float:left 或者float:right）

2、position的值不是static或者relative。（position:absolute或者position:fixed）

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible（overflow:hidden、overflow:scroll）

5、父元素与正常文件流的子元素（非浮动子元素）自动形成一个BFC

BFC中盒子怎么对齐
在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
W3C给出得规范是：在BFC中，每一个盒子（子元素）的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。浮动也是如此（尽管盒子里的行盒子 Line Box 可能由于浮动而变窄）。

正常情况下一个BFC是由父元素和子元素组成的，有时候也只有一个父元素

BFC的特征

（1）所有子元素（包含浮动元素）与容器（父元素）左边对齐

（2）属于同一个BFC的父元素和子元素，相邻的父子或者兄弟间margin垂直方向会重叠，若2个元素属于不同的BFC，则垂直方向不会重叠

（3）可以自动撑开容器（若子元素是float的，父元素设置overflow:hidden，父元素就形成一个BFC）

防止margin重叠我们就可以从BFC的特征入手，让2个相邻的元素不是属于一个BFC

    



    
        first p
        
            second p

由于class 为second的元素外面套了一个div（一定要套一个div，因为overflow:hidden 是设置在父元素上，里面一定要有子元素），并设置了overflow:hidden，相当于新创建了一个新的BFC, first 与second 属于2个BFC所以margin不会重叠

另一种方法，子元素浮动，浮动相当于新建了BFC,所以不会重叠

    



    
        first p
        second p

相邻的子元素2个都浮动或者下面的一个浮动

更多前端知识请见
微信公众号：前端之攻略

云服务器 GPU云服务器云计算与大数据方向解决方法障解决方法的解决方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117015.html

margin详解

摘要：二的赋值普通元素的百分比都是相对于容器的宽度计算。绝对定位元素的百分比，绝对定位元素的百分比是相对于第一个定位祖先元素的宽度计算应用宽高自适应矩形传送门之所以会是，是因为垂直方向上发生重叠。一. margin对尺寸的影响 1.可视尺寸 a.适用于没有设定width/height的普通block水平元素float元素、absolute/fixed元素、inline元素、table-ce...

darry 2019-08-29 11:06 评论0 收藏0
谈谈BFC与ie特有属性hasLayout

摘要：当一个内联元素想获得就要使用这个属性。下因为导致的浮动元素与普通元素之间产生代码如下我是浮动元素我是后面的文字，用来测试的正常情况下解决方式加一个的不只是文字，的浮动元素也会和内联元素产生的值。设置属性的元素不和任何元素发生合并。发现我好久没更新博文了=-=这里把我之前在博客园写过的一篇关于BFC的文章粘贴过来，顺便自己也再次做个总结。最近看了一篇总结ie常见bug的文章，里面提...

CodeSheep 2019-08-30 12:51 评论0 收藏0
谈谈BFC与ie特有属性hasLayout

摘要：当一个内联元素想获得就要使用这个属性。下因为导致的浮动元素与普通元素之间产生代码如下我是浮动元素我是后面的文字，用来测试的正常情况下解决方式加一个的不只是文字，的浮动元素也会和内联元素产生的值。设置属性的元素不和任何元素发生合并。发现我好久没更新博文了=-=这里把我之前在博客园写过的一篇关于BFC的文章粘贴过来，顺便自己也再次做个总结。最近看了一篇总结ie常见bug的文章，里面提...

iliyaku 2019-08-01 15:08 评论0 收藏0
margin详解

摘要：属性指定了盒的区的宽度。简写属性一次性设置四周的，而其它属性只设置它们各侧的。 margin属性指定了盒的margin区的宽度。margin简写属性一次性设置四周的margin，而其它margin属性只设置它们各侧的。这些属性适用于所有元素，但非替换行内元素上的竖直margin将不会产生任何效果 margin与容器尺寸 margin与可视尺寸 margin与可视尺寸只适用于没有设定...

stonezhu 2019-08-29 12:25 评论0 收藏0
CSS: 潜藏着的BFC

摘要：而就潜藏在其中，当你修改样式时，一不小心就能触发它而毫无察觉，因此没有意识到的神奇之处。实例解决侵占浮动元素的问题我们知道浮动元素会脱离文档流，然后浮盖在文档流元素上。在写样式时，往往是添加了一个样式，又或者是修改了某个属性，就达到了我们的预期。而BFC就潜藏在其中，当你修改样式时，一不小心就能触发它而毫无察觉，因此没有意识到BFC的神奇之处。一、什么是BFC（Block Form...

learn_shifeng 2019-08-29 13:54 评论0 收藏0