垂直方向margin重叠原因与解决方法 原
我们经常写样式的时候会遇到垂直方向margin重叠的问题,如下代码:
<style>
.container1 {
color: #fff;
}
.first {
margin-bottom: 20px;
padding-left: 10px;
height: 200px;
width: 200px;
background-color: #28adbd;
}
.second {
margin-top: 20px;
height: 200px;
width: 200px;
background-color: #6871c1;
}
</style>
<body>
<div class="container1">
<div class="first">first p</div>
<div class="second">second p</div>
</div>
</body>
可以看出由于margin-top:20px;margin-bottom:20px,应该显示40px但是只显示20px,是什么原因呢?这就涉及到BFC
什么是BFC:Block Formatting 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
<style>
.container1 {
color: #fff;
}
.first {
margin-bottom: 20px;
padding-left: 10px;
height: 200px;
width: 200px;
background-color: #28adbd;
}
.second {
margin-top: 20px;
height: 200px;
width: 200px;
background-color: #6871c1;
}
</style>
<body>
<div class="container1">
<div class="first">first p</div>
<div style="overflow:hidden">
<div class="second">second p</div>
</div>
</div>
</body>
由于class 为second的元素外面套了一个div(一定要套一个div,因为overflow:hidden 是设置在父元素上,里面一定要有子元素),并设置了overflow:hidden,相当于新创建了一个新的BFC, first 与second 属于2个BFC所以margin不会重叠
另一种方法,子元素浮动,浮动相当于新建了BFC,所以不会重叠
<style>
.container1 {
color: #fff;
width:200px;
}
.first {
margin-bottom: 20px;
padding-left: 10px;
height: 200px;
width: 200px;
background-color: #28adbd;
}
.second {
margin-top: 20px;
height: 200px;
width: 200px;
background-color: #6871c1;
}
</style>
<body>
<div class="container1">
<div class="first" style="">first p</div>
<div class="second" style="float:left">second p</div>
</div>
</body>
相邻的子元素2个都浮动或者下面的一个浮动
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法