关于元素间的边距重叠问题与BFC
一、边距重叠常见情况
1、垂直方向上相邻元素的重叠
（水平方向上不会发生重叠）
2、 垂直方向上父子元素间的重叠
二、BFC
1、什么是 BFC
BFC（Block Formatting Context），即块级格式化上下文，创建了 BFC 的元素是一个独立的容器，里面无论如何布局都不会影响到外面的元素
2、创建 BFC 的方法
（1）设置 overflow 属性，除了 visible 以外的值（例如 hidden、auto）
（2）设置 float 属性，除了 none 以外的值（例如 left、right）
（3）设置 position 属性，除了static 和 relative 以外的值（例如 absolute、fixed）
（4）设置 display 属性，可以是 flex、inline-block、table-cell...
3、BFC 的使用场景
（1）解决元素间的边距重叠问题 -- 分别添加创建了 BFC 的父元素
<!-- 创建BFC前 -->
<body>
<div></div>
<div></div>
</body> <!-- 创建BFC后 -->
<body>
<section>
<div></div>
</section>
<section>
<div></div>
</section>
</body>
/* 创建BFC前 */
div {
width: 100px;
height: 100px;
background: #7b81ca;
margin: 30px;
} /* 创建BFC后 */
section {
overflow: hidden;
}
div {
width: 100px;
height: 100px;
background: #7b81ca;
margin: 30px;
}
（2）解决浮动重叠问题 -- 为非浮动的元素创建 BFC
（常用于文字环绕图片的效果）
<body>
<section></section>
<div></div>
</body>
/* 创建BFC前 */
section {
width: 100px;
height: 200px;
background: rgba(244, 220, 250, 0.8);
float: left;
}
div {
width: 200px;
height: 100px;
background: rgba(123, 129, 202, 0.8);
} /* 创建BFC后 */
section {
width: 100px;
height: 200px;
background: rgba(244, 220, 250, 0.8);
float: left;
}
div {
width: 200px;
height: 100px;
background: rgba(123, 129, 202, 0.8);
overflow: hidden;
}
（3）清除浮动，解决浮动元素的父元素高度塌陷问题 -- 为父元素创建 BFC
<body>
<section>
<div></div>
</section>
</body>
/* 创建BFC前 */
section {
background: rgba(244, 220, 250, 1);
}
div {
width: 100px;
height: 100px;
background: rgba(123, 129, 202, 1);
float: left;
} /* 创建BFC后 */
section {
background: rgba(244, 220, 250, 1);
overflow: hidden;
}
div {
width: 100px;
height: 100px;
background: rgba(123, 129, 202, 1);
float: left;
}
关于元素间的边距重叠问题与BFC的更多相关文章
- __x__(22)0907第四天__ 垂直外边距重叠
外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外 ...
- CSS盒模型以及如何解决边距重叠问题
盒模型有两种,W3C 和IE 盒子模型 W3C定义的盒模型包括margin.border.padding.content,元素的宽度width=content的宽度 IE盒模型与W3C盒模型的唯一区别 ...
- 浅析 CSS 中的边距重叠
浅析 CSS 中的边距重叠 边距重叠是什么 在说边距重叠之前,先以正常的思维来考虑如果你现在是浏览器引擎遇到这种情况应该怎么办? 现在有两个元素 div1 和 div2 紧挨着,中间没有它元素,它们的 ...
- 怎么样子盒子能撑起父盒子？浮动,BFC,边距重叠
怎么样子盒子能撑起父盒子? 从行内元素跟块元素来看: 一般情况下,行内元素只能包含数据和其他行内元素. 而块级元素可以包含行内元素和其他块级元素. 块级元素内部可以嵌套块级元素或行内元素. 建议行内元 ...
- 如何消除inline-block元素间间距问题（转）
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type=" ...
- 去除inline-block元素间间距的N种方法
这篇文章发布于 2012年04月24日,星期二,22:38,归类于 css相关. 阅读 147771 次, 今日 52 次 by zhangxinxu from http://www.zhangxin ...
- [转]去除inline-block元素间间距的N种方法
来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子 ...
- __x__(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷
<div class="box1"> <tabl></table> <div class="box2">< ...
- 去除inline-block元素间间距的N种方法<转>
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...
随机推荐
- [LeetCode] 163. Missing Ranges 缺失区间
Given a sorted integer array nums, where the range of elements are in the inclusive range [lower, up ...
- 如何杀死处于进程状态D的进程
D状态的就是 uninterruptible sleep ,此时进程不能被信号唤醒,GDB等调试工具也不能对它调试,因为GDB也是用到了信号,也杀不死它 D状态的形成 如何分析D状态 cat /pro ...
- jquery json对象转换
jquery json对象转换 <pre>//json数组转json串var arr = [1,2,3, { a : 1 } ];JSON.stringify( arr ); //json ...
- phaser，开启三个线程分别搜索三个文件夹
Phaser表示“阶段器”,用来解决控制多个线程分阶段共同完成任务的情景问题 启动三个线程,分别对三个文件夹搜索,文件要以txt结尾,修改时间要在一天之内,并将文件路径打印在控制台 /** * 开启三 ...
- 关于MSVCR100.dll、MSVCR100d.dll、Msvcp100.dll、abort()R6010等故障模块排查及解决方法
一.常见故障介绍 最近在开发相机项目(项目细节由于公司保密就不介绍了),程序运行5个来月以来首次出现msvcr100.dll故障等问题,于是乎开始了分析之路,按照度娘上的一顿操作,期间也是出现了各种不 ...
- Sublime Text3安装LESS
Sublime Text3安装LESS 1.Sublime Text3利用Package Control安装LESS插件.LESS2CSS插件 2.去node官网下载node.js http://no ...
- python 能做什么（常用库）
1. 编写脚本,如测试脚本.初始化脚本.运维脚本:pywin32.nose2. 图形界面开发: Tkinter.PyQt . wxPython . PySide .Pillow3. 爬虫: Scrap ...
- 存储库之MongoDB
一.简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库(非关系型数据库) 1.易用性 MongoDB是一个面向文档(document-oriented)的数据库,而不是关系型数据库. 不采 ...
- 协议——SCCB与IIC的区别
SCCB(Serial Camera Control Bus,串行摄像头控制总线)是由OV(OmniVision的简称)公司定义和发展的三线式串行总线,该总线控制着摄像头大部分的功能,包括图像数据格式 ...
- 【SQL Server数据迁移】64位的机器：SQL Server中查询ORACLE的数据
从SQL Server中查询ORACLE中的数据,可以在SQL Server中创建到ORACLE的链接服务器来实现的,但是根据32位 .64位的机器和软件, 需要用不同的驱动程序来实现. 在64位的机 ...