margin塌陷与margin合并（margin），清除浮动
**1、margin塌陷**
问题：垂直方向的父子关系的盒子使用不当会产生margin塌陷。给子级设置margin-top时，他不会相对父级一起动，只有他的margin超过父级的margin时，才会生效，但会带着父级一起动（作者总结，官方定义自己查看）。
如：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="parent" style="width:200px;height:200px; background-color:red;margin-top:20px;margin-left:20px">
<div class="son" style="width:100px;height:100px; background-color:yellow; margin-top:20px ">//20pxmargin-top
</div>
</div>
</body>
</html>
```
效果：
**解决方法：**
（1）给父级盒子加上边框border:1px silod black;（改变结构了，不推荐使用）
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="parent" style="width:200px;height:200px;
background-color:red;margin-top:20px;margin-left:20px;border:1px solid black">
<div class="son" style="width:100px;height:100px; background-color:yellow; margin-top:20px ">
</div>
</div>
</body>
</html>
```
效果：
（2）触发盒子的BFC模型（不懂就去百度吧）
如何触发盒子的BFC呢？
1.Position：absolute；
2.display:inline-block;
3.float:left/right;
4.overflow:hiddle;
1.Position：absolute；给父级加上绝对定位，让子级相对父级动。
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="parent" style="width:200px;height:200px;
background-color:red;margin-top:20px;margin-left:20px;position: absolute;">
<div class="son" style="width:100px;height:100px; background-color:yellow; margin-top:20px ">
</div>
</div>
</body>
</html>
```
效果：
2.display:inline-block;让父级同时具有行级属性和块级属性。
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="parent" style="width:200px;height:200px;
background-color:red;margin-top:20px;margin-left:20px;display: inline-block;">
<div class="son" style="width:100px;height:100px; background-color:yellow; margin-top:20px ">
</div>
</div>
</body>
</html>
```
效果：
3.float:left/right;让父级产生浮动流
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="parent" style="width:200px;height:200px;
background-color:red;margin-top:20px;margin-left:20px; float:left;">
<div class="son" style="width:100px;height:100px; background-color:yellow; margin-top:20px ">
</div>
</div>
</body>
</html>
```
效果：
4.overflow:hiddle;溢出部分隐藏
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="parent" style="width:200px;height:200px;
background-color:red;margin-top:20px;margin-left:20px; overflow: hidden;">
<div class="son" style="width:100px;height:100px; background-color:yellow; margin-top:20px ">
</div>
</div>
</body>
</html>
```
效果：
**2、margin合并**
问题:
margin-left和margin-right区域不能共用。只会叠加。
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<span class="box1" style="background-color:yellow; margin-right:30px;">1</span>
<span class="box2" style="background-color:red; margin-left:50px;">2</span>
</body>
</html>
```
效果：
两个兄弟结构垂直方向的margin共用。
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<span class="box1" style="background-color:yellow; margin-right:30px;">1</span>
<span class="box2" style="background-color:red; margin-left:50px;">2</span>
<div class="demo1" style="background-color:blue; margin-bottom:100px ;">3</div>
<div class="demo2" style="background-color:salmon; margin-top: 100px;">3</div>
</body>
</html>
```
效果：
解决垂直方向的margin合并问题也是触动盒子的BFC。
解决方法如下：（嵌套盒子：然后：overflower:hidden;）
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<span class="box1" style="background-color:yellow; margin-right:30px;">1</span>
<span class="box2" style="background-color:red; margin-left:50px;">2</span>
<div style="overflow:hidden;">
<div class="demo1" style="background-color:blue; margin-bottom:100px ;">3</div>
</div>
<div class="demo2" style="background-color:salmon; margin-top: 100px;">3</div>
</body>
</html>
```
效果：
**总结：**
在实际开发时不解决这个问题，比如说要解决垂直方面200px，为什么不直接top200px呢，不用top100px,然后bottom100px。
**顺带说一下清除浮动的两种两种方法：**
（1）在有浮动的元素的后面加入一个标签。
下面我就简单举例了：
<div class = "clear"></div>
css中：
.clrar{clear:both;}
(2)使用伪类元素，找到需要清除的标签，直接使用三件套：
.warpper::after{
content:"";
clrar:both;
display:block;
}
**想看更清除浮动更详细的解答，请继续关注作者的更新。**
如发现错误，请联系作者！！！！
margin塌陷与margin合并（margin），清除浮动的更多相关文章
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
- 6.margin塌陷问题
当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: <!DOCTYPE html><ht ...
- Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题
一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...
- “margin塌陷” 嵌套盒子外边距合并现象
来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...
- 林大妈的CSS知识清单（二）可见格式化模型（内含margin塌陷与浮动闭合的解决方案）
盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...
- 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式
边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...
- 1 background（复合属性）与font（复合属性） 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径
1 background(复合属性)与font(复合属性): background: 颜色 图片的链接 是否平铺 背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...
- margin的两个有趣现象：margin合并和margin塌陷
margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...
- css清除浮动，清除子节点margin溢出问题
清除浮动 .clearfix:after{ content:”.”; display:block; height:0; clear:both; visibility:hidden; } 清除margi ...
随机推荐
- springboot+jwt做api的token认证
本篇和大家分享jwt(json web token)的使用,她主要用来生成接口访问的token和验证,其单独结合springboot来开发api接口token验证很是方便,由于jwt的token中存储 ...
- 使用 Moq 测试.NET Core 应用 -- 其它
第一篇文章, 关于Mock的概念介绍: https://www.cnblogs.com/cgzl/p/9294431.html 第二篇文章, 关于方法Mock的介绍: https://www.cnbl ...
- Capacitor 新一代混合应用“神器” 会代替Cordova吗？？
1.介绍or畅想 Capacitor是由ionic团队最新开发维护的一个跨平台的应用程序容器,可以轻松构建在iOS,Android,Electron 和 Web 上本机运行的Web应用程序.我们称这些 ...
- 【设计模式+原型理解】第一章：使用Javascript来巧妙实现经典的设计模式
刚开始学习设计模式之前,我是没想说要学习设计模式的,我只是因为想学习JS中的原型prototype知识,一开始我想JS中为什么要存在原型这个东西?于是慢慢通过原型而接触到设计模式,后来发现我这个过程是 ...
- 痞子衡嵌入式：如果i.MX RT是一匹悍马，征服它时别忘了用马镫MCUBootUtility
-- 跨界之风吹满地,先锋当属NXP; 微控制器谁独骚?当仁不让看RT! 恩智浦半导体2017年10月正式发布了业内首款跨界处理器-i.MX RT系列,这是MCU界的汗血宝马,更是一匹桀骜不驯的悍马. ...
- C# 10分钟完成百度人脸识别——入门篇
嗨咯,小编在此祝大家新年快乐财多多! 今天我们来盘一盘人脸注册.人脸识别等相关操作,这是一个简单入门教程. 话不多说,我们进入主题: 完成人脸识别所需的步骤: 注册百度账号api,创建自己的应用: 创 ...
- 为什么使用 Redis 及其产品定位
一:传统 MySQL+ Memcached 架构遇到的问题 实际 MySQL 是适合进行海量数据存储的,通过 Memcached 将热点数据加载到 cache,加速访问,很多公司都曾经使用过这样的架构 ...
- while，for，if输入账号密码判断（还请各位大牛能够优化，本人刚学习一周）
AccountNumber1 = [] password1 = [] flag = True while flag: num = 0 a = 1 print('-----------这是个欢迎界面-- ...
- Java面试 32个核心必考点完全解析
目录 课程预习 1.1 课程内容分为三个模块 1.2 换工作面临问题 1.3 课程特色 课时1:技术人职业发展路径 1.1 工程师发展路径 1.2 常见技术岗位划分 1.3 面试岗位选择 1.4 常见 ...
- C++系列总结——多态
前言 封装隐藏了类内部细节,通过继承加虚函数的方式,我们还可以做到隐藏类之间的差异,这就是多态(运行时多态).多态意味一个接口有多种行为,今天就来说说C++的多态是怎么实现的. 编译时多态感觉没什么好 ...