首先看一下问题案例

.wrapper{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin-top: 100px;
            margin-left: 100px;
        }
        .inner{
            width: 50px;
            height: 50px;
            margin-top: 100px;
            margin-left: 50px;
            background-color:black;
        }
 
<div class="wrapper">
        <div class="inner"></div>
    </div>

可以明显看到的是子元素inner设置了margin-top:100px,照理来讲其应该相对父元素往下偏移100px,

但是实际效果确是子元素上边界却紧紧的贴着父元素的上边界,所以这时inner的margin-top并没有生效,

而且也没有对布局带来其他影响,接下来再看一个有趣的现象

首先修改inner的样式将margin-top设为200px

        .inner{
            width: 50px;
            height: 50px;
            margin-top: 200px;
            margin-left: 50px;
            background-color:black;
        }

然后再看效果

对比发现这回子元素inner上边界仍然紧贴着父元素上边界,但是连带着父元素,这两个div距离窗口上方的距离都增加,

这就是两个元素元素嵌套时,子元素垂直方向的margin塌陷问题,其实这样的布局条件下,这两个元素的margin-top被混合在一起计算了,

其结果是浏览器取了两个元素中margin-top的最大值作为这两个元素最终的margin-top

那么怎么解决这个问题呢?这就要用到bfc的概念

bfc指的是block format context,块级格式上下文,当元素具有某些特定的样式时会触发元素变为bfc元素,而触发bfc的元素将会改变一小部分的渲染规则,可用于解决一些css的疑难bug

那么如何才能触发bfc呢?

一般来讲,如果一个元素具有以下其中一个样式,则这个元素变成了bfc元素,其渲染规则将会发生一些变化,这些样式有:

position:absolute;

display:inline-block;

float:left/right;

overflow:hidden;

而结合本案例我们使用overflow属性即可,给父元素wrapper加上overflow:hidden,子元素inner的margin-top还是设为50px,样式最终如下

.wrapper{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin-top: 100px;
            margin-left: 100px;
            overflow: hidden;
        }
        .inner{
            width: 50px;
            height: 50px;
            margin-top: 50px;
            margin-left: 50px;
            background-color:black;
        }

这时我们发现,网页的显示终于达到了预期的效果

触发bfc解决父子元素嵌套垂直方向margin塌陷问题的更多相关文章

  1. 父元素onmouseover触发事件在父子元素间移动不停触发的问题

    今天写了一个侧边栏动态展开收缩的效果 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  2. css 垂直方向 margin 边距 重合

    1:控制两个相邻边盒子之间的距离,在A或者B盒子上用margin控制,就可以控制距离了. 2:父子级之间的元素,常规文档流中,只要垂直外边距直接接触就会发生合并.比如在写header标签时,想移动he ...

  3. css 元素水平垂直方向居中

    html部分 <div class="parent"> <div class="child"> - -居中- - </div> ...

  4. HTML-完美解决父子元素的外边距重叠和高度塌陷问题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

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

    参考博客:https://blog.csdn.net/weixin_33743661/article/details/88755435

  6. bfc与浮动元素的关系

    首先说明两个特性: 1,浮动元素兄弟元素的布局规则 当html中存在浮动元素时,其兄弟元素的布局遵循如下规则: (1)块级元素的渲染无视浮动元素 (2)文本内容或者是行内元素的渲染会考虑到浮动元素的存 ...

  7. CSS基础 margin塌陷问题以及解决 办法

    场景:两个相互嵌套的块级元素,父子元素相互紧贴margin-top会合并作用在父元素的子元素结果:导致两个盒子同时移动 解决方法: 1.给父元素设置overflow:hidden 2.给父元素设置浮动 ...

  8. es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  9. CSS居中问题:块级元素和行级元素在水平方向以及垂直方向的居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:marg ...

随机推荐

  1. SpringMVC参数传递方案

    SpringMVC参数传递方案 登录 @PostMapping("/login") @ResponseBody public Map login(String username, ...

  2. [转帖]Linux监测某一时刻对外的IP连接情况

    Linux监测某一时刻对外的IP连接情况 https://blog.csdn.net/twt326/article/details/81454171 公司机器有病毒 需要分析一下. 之前有需要,在CS ...

  3. sentry之二:sentry配置钉钉和email

    springboot+springcloud后台项目配置日志采集 gradle: compile 'com.getsentry.raven:raven-logback:8.0.2' compile ' ...

  4. 2019-11-29-WPF-高速书写-StylusPlugIn-原理

    原文:2019-11-29-WPF-高速书写-StylusPlugIn-原理 title author date CreateTime categories WPF 高速书写 StylusPlugIn ...

  5. 排序算法Java代码实现(四)—— 归并排序

    本篇内容: 归并排序 归并排序 算法思想: 将两个或两个以上的有序表合并成一个新的有序表, 即把待排序序列分成若干个子序列,每个子序列是有序的,然后在把有序子序列合并为整体有序序列. 此算法分为两步: ...

  6. Java Automic包下的AtomicInteger

    感谢这两位博主的文章,文章源于: https://www.cnblogs.com/chenpi/p/5375805.html https://blog.csdn.net/fanrenxiang/art ...

  7. 未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序报错的解决办法

    https://www.jb51.net/article/157457.htm 下载32位版本安装即可 Microsoft Access Database Engine Redistributable ...

  8. .net core 读取appsettings.json乱码

    .net core 读取配置文件乱码:vs2019读取appsettings.json乱码问题; .net core 读取appsettings.json乱码问题;用notepad++或者其他编辑器打 ...

  9. C# vb .NET识别读取QR二维码

    二维码比条形码具有更多优势,有些场合使用二维码比较多,比如支付.那么如何在C#,.Net平台代码里读取二维码呢?答案是使用SharpBarcode! SharpBarcode是C#快速高效.准确的条形 ...

  10. 解决PL/SQL使用无法导出dmp

    解决PL/SQL使用无法导出dmp 1.配置plsql Export Executable:D:\app\product\11.2.0\dbhome_1\BIN\exp.exe 2.配置环境变量ORA ...