触发bfc解决父子元素嵌套垂直方向margin塌陷问题
首先看一下问题案例
可以明显看到的是子元素inner设置了margin-top:100px,照理来讲其应该相对父元素往下偏移100px,
但是实际效果确是子元素上边界却紧紧的贴着父元素的上边界,所以这时inner的margin-top并没有生效,
而且也没有对布局带来其他影响,接下来再看一个有趣的现象
首先修改inner的样式将margin-top设为200px
然后再看效果
对比发现这回子元素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,样式最终如下
这时我们发现,网页的显示终于达到了预期的效果
触发bfc解决父子元素嵌套垂直方向margin塌陷问题的更多相关文章
- 父元素onmouseover触发事件在父子元素间移动不停触发的问题
今天写了一个侧边栏动态展开收缩的效果 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- css 垂直方向 margin 边距 重合
1:控制两个相邻边盒子之间的距离,在A或者B盒子上用margin控制,就可以控制距离了. 2:父子级之间的元素,常规文档流中,只要垂直外边距直接接触就会发生合并.比如在写header标签时,想移动he ...
- css 元素水平垂直方向居中
html部分 <div class="parent"> <div class="child"> - -居中- - </div> ...
- HTML-完美解决父子元素的外边距重叠和高度塌陷问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 垂直方向margin重叠原因与解决方法
参考博客:https://blog.csdn.net/weixin_33743661/article/details/88755435
- bfc与浮动元素的关系
首先说明两个特性: 1,浮动元素兄弟元素的布局规则 当html中存在浮动元素时,其兄弟元素的布局遵循如下规则: (1)块级元素的渲染无视浮动元素 (2)文本内容或者是行内元素的渲染会考虑到浮动元素的存 ...
- CSS基础 margin塌陷问题以及解决 办法
场景:两个相互嵌套的块级元素,父子元素相互紧贴margin-top会合并作用在父元素的子元素结果:导致两个盒子同时移动 解决方法: 1.给父元素设置overflow:hidden 2.给父元素设置浮动 ...
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- CSS居中问题:块级元素和行级元素在水平方向以及垂直方向的居中问题
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:marg ...
随机推荐
- java线程锁基础
定义运行方法 package com.company; // 包名import java.util.concurrent.locks.ReentrantLock;import java.util.co ...
- Redis(一) redis安装、启停
Redis是开源的内存数据存储,常被用作为内存数据库.缓存.全局队列.计数器等等. Redis安装 Redis分为多种模式:单机模式.高可用模式.集群模式.这篇中主要简介单机版的安装方式. 源码构建式 ...
- 【spring boot】注解@Slf4j的使用
注解@Slf4j的使用 如果不想每次都写 private final Logger logger = LoggerFactory.getLogger(当前类名.class); 可以用注解@Slf4j ...
- 「福利」Java Swing 编写的可视化算法工程,包含树、图和排序
之前在整理<学习排序算法,结合这个方法太容易理解了>这篇文章时,发现了一个用 Java Swing 编写的可视化算法工程,真心不错!包含了常用数据结构和算法的动态演示,先来张图感受下: 可 ...
- ASP.NET MVC EF 连接数据库(二)-----Model First
Model first (VS2015 ,Sql Server2014) 新建MVC项目 右键product ,新增标量属性(数据库表中的字段) Ctrl + S 保存页面,右键“根据模型 ...
- vi/vim的快捷操作(2)
1.拷贝当前行[yy],拷贝当前行向下的5行[5yy],并粘贴[p] 2.删除当前行[dd],删除当前行向下的5行[5dd] 3.在文件中查找某个单词,命令行模式下输入[/关键字],回车查找,输入[n ...
- 了解MySQL
目前流行的数据库 MySQL Oracle Microsoft SQLServer Microsoft Access PostgreSQL DB2/UDB InfoMax MySQL介绍 世界上最流行 ...
- Ionic run android失败解决方法。
今天在node.js窗口执行命令行ionic run android时就是报Error executing "adb device":error错,一开始以为是SDK不全,后来以为 ...
- Android中webview html5 自动播放本地视频
MainActivity代码 public class Html5VideoAutoPlay extends Activity { WebView webview = null; @Override ...
- How to use VideoToolbox to decompress H.264 video stream
来源:http://stackoverflow.com/questions/29525000/how-to-use-videotoolbox-to-decompress-h-264-video-str ...