关于元素间的边距重叠问题与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 ...
随机推荐
- Jenkins - 构建流水线
1 - 以流水线的方式进行构建 关联多任务形成流水线的两种方法 通过定义项目的后续项目,将项目直接关联起来按顺序执行, 另外定义一个用于统筹管理的项目,定义各项目之间的关联性,然后以流水线的方式执行 ...
- 【视频开发】RTSP SERVER（基于live555）详细设计
/* *本文基于LIVE555的嵌入式的RTSP流媒体服务器一个设计文档,个中细节现剖于此,有需者可参考指正,同时也方便后期自己查阅.(本版本是基于2011年的live555) 作者:llf_17@q ...
- 【视频开发】 ffmpeg支持的硬解码接口
To enable DXVA2, use the --enable-dxva2 ffmpeg configure switch. To test decoding, use the following ...
- 最新 奥买家java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.奥买家等10家互联网公司的校招Offer,因为某些自身原因最终选择了奥买家.6.7月主要是做系统复习.项目复盘.LeetCo ...
- ScheduledExecutorService调度线程池运行几次后停止某一个线程
开发中偶尔会碰到一些轮询需求,比如我碰到的和银行对接,在做完某一个业务后银行没有同步给到结果,这时候就需要查询返回结果,我们的需求是5分钟一次,查询3次,3次过后如果没有结果则T+1等银行的文件,对于 ...
- jquery 根据后台传递过来的三维数组动态生成三级菜单
根据后台传递过来的三维数组动态生成三级菜单 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- int and Integer
int和Integer的区别 1.Integer是int的包装类,int则是java的一种基本数据类型 2.Integer变量必须实例化后才能使用,而int变量不需要 3.Integer实际是对象的引 ...
- 记录一次mysql宕机的解决办法
首先先粘贴出来我的错误信息,如下: 2019-07-16T00:53:18.285919Z 0 [System] [MY-010116] [Server] /usr/sbin/mysqld (mysq ...
- ADO.NET 一般操作(c#)
ADO.NET五大对象:SqlConnection.SqlCommand.SqlDataReader.SqlDataAdapter .DataSet ,其中SqlDataAdapter 不建议使用 一 ...
- win7远程服务器发生身份验证错误，要求的函数不受支持
远程服务器发生身份验证错误,要求的函数不受支持,远程登录服务器以前都是正常的,今天登录远程桌面就一直是这样的错误.记录一下解决方法. 方法一:卸载补丁KB41037181.打开控制面板,找到“程序和功 ...