margin重叠是指两个同级元素之间。margin穿透指的是,子元素margin超出父元素而未被父元素包含的现象。

出现margin重叠的原因: 同一个BFC里面两个块级元素会出现margin折叠。

解决方式:让两个块级元素不在一个BFC内。

默认情况,子元素设置margin-top或者margin-bottom会影响其父元素,这就是所谓的margin穿透。解决方式:1.给父元素加个border; 2.将父元素变成BFC。

BFC: Block Formatting Context 简称 块级格式化上下文

BFC的特点: BFC是一个绝对的独立空间,它的内部元素是不会影响到外部元素的!!!

BFC布局规则:

  1. 内部的Box会在垂直方向,按照从上到下的方式逐个排列。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
  4. BFC的区域不会与float box重叠
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此
  6. 计算BFC的高度时,浮动元素的高度也参与计算

元素首先需要是一个block元素,才能变成BFC;

触发BFC的条件:

  • 根元素,body
  • float的值不为none
  • overflow不为visible;可以是hidden或auto或scroll
  • display的值设置为inline-block,flex或者inline-flex,table-cell,table-caption或者inline-table
  • position的值设置为absolute、fixed

因此通过将其中一个元素display属性设置为inline-block,width设置为100%是比较好的解决方式;既解决了margin穿透问题,又达到与display为block一样的效果。

延伸:

与BFC对应的另外一个概念IFC(inline formatting context) 行内格式化上下文

margin重叠与穿透问题的更多相关文章

  1. 上下margin重叠传递问题

    我发现强迫症真的是我一个大病...每次都非得把所有情况都实验出来不可...BUT!!!!!!!!!悲催的是,这么多情况我根本记不住...还是要在写代码的时候不断出错再排错~受不了自己了!不过还是把这部 ...

  2. CSS 外边距(margin)重叠及防止方法

    边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...

  3. css margin重叠

    父子元素margin(垂直方向)重叠 解决办法: 给子元素添加浮动属性,相应父元素添加必要的清浮动属性: 给父元素添加边缘属性,如padding.border: 同级元素margin(垂直方向)反向重 ...

  4. 清浮动,防止上下margin重叠(浏览器顶部空白崩溃)

    清浮动 父级添加类别! .clearfix{zoom:1;//兼容ie6,7} .clearfix:after{ content:"."; display: "block ...

  5. CSS盒模型和margin重叠

    在 CSS 中,width 和 height 指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸.(div的实际占用尺寸变打了) 但: 一旦为页面设置 ...

  6. margin重叠

    margin重叠也就是我们常说的CSS 外边距合并,W3C给出如下定义: 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 ...

  7. margin重叠现象

    1.上下/左右相邻的普通元素margin,不是两者相加之和,而是取最大值,这个现象叫做margin重叠. 2. 普通元素才会发生margin重叠,如果是float元素,就不会发生.margin是两者相 ...

  8. 解决margin重叠的问题

    margin重叠有两种情况: 1.兄弟级的垂直块之间,margin这个属性上下边距,会发生重叠的情况 解决办法:float浮动或display:inline-block 2 .父子级的块之间,子级的上 ...

  9. 2016/2/25 1, margin auto 垂直方向测试 无效 2,margin重叠 3,哪些是块状哪些是内联 4,display:block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

随机推荐

  1. PHP 面试官问:你说说Redis的几个过期策略?

    在使用redis时,一般会设置一个过期时间,当然也有不设置过期时间的,也就是永久不过期.当设置了过期时间,redis是如何判断是否过期,以及根据什么策略来进行删除的. 设置过期时间 expire ke ...

  2. 通过 position:fixed 实现底部导航

    通过 position:fixed 实现底部导航 HTML <div id="footer">页脚</div> CSS #footer { clear: b ...

  3. C#实现整型数据字任意编码任意进制的转换和逆转换

    实现如下: using System; using System.Collections.Generic; using System.Linq; using System.Text;  namespa ...

  4. 【SpringBoot | Redis】SpringBoot整合Redis

    SpringBoot整合Redis 1. pom.xml中引入Redis相关包 请注意,这里我们排除了lettuce驱动,采用了jedis驱动 <!-- redis的依赖 --> < ...

  5. python day 1 homework 1

    作业一要求: 1 输入用户名密码 2 认证成功后显示欢迎信息 3 输错三次后锁定 import os #生成保存用户信息的字典 d_userinfo = {} #保存用户登录字典 input_logi ...

  6. PHP的两种选择防止sql注入

    1.使用PDO: $stmt = $pdo->prepare('SELECT * FROM user WHERE name = :name'); $stmt->execute(array( ...

  7. 阿里云ECS服务器部署HADOOP集群(一):Hadoop完全分布式集群环境搭建

    准备: 两台配置CentOS 7.3的阿里云ECS服务器: hadoop-2.7.3.tar.gz安装包: jdk-8u77-linux-x64.tar.gz安装包: hostname及IP的配置: ...

  8. fastjson 1.2.24反序列化导致任意命令执行漏洞分析记录

    环境搭建: 漏洞影响版本: fastjson在1.2.24以及之前版本存在远程代码执行高危安全漏洞 环境地址: https://github.com/vulhub/vulhub/tree/master ...

  9. RALM: 实时 Look-alike 算法在微信看一看中的应用

    嘉宾:刘雨丹 腾讯 高级研究员 整理:Jane Zhang 来源:DataFunTalk 出品:DataFun 注:欢迎关注DataFunTalk同名公众号,收看第一手原创技术文章. 导读:本次分享是 ...

  10. 从零开始在ubuntu上配置深度学习开发环境

    从零开始在ubuntu上配置深度学习开发环境 昨天一不小心把原来配置好的台式机的开发环境破坏了,调了半天没有调回来,索性就重装一次ubuntu系统.这篇文章主要记录一个简单的.‘傻瓜式’教程. 一.U ...