关于元素间的边距重叠问题与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 ...
随机推荐
- V8世界探险 (1) - v8 API概览
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/lusing/article/detai ...
- Anaconda无法更新
在安装完Anaconda,更新包时 C:\Users\Administrator>conda upgrade --all WARNING: The conda.compat module is ...
- ThreadPool.QueueUserWorkItem 简单示例，显示当前时间
1.线程池 添加方法 作为一个线程运行 class Program { static void Main(string[] args) { ThreadPool.QueueUserWorkItem( ...
- [04]Go设计模式:抽象工厂模式（Abstract Factory Pattern）
目录 抽象工厂模式 一.简介 二.代码 三. 参考资料 抽象工厂模式 一.简介 抽象工厂模式(Abstract Factory Pattern)是围绕一个超级工厂创建其他工厂.该超级工厂又称为其他工厂 ...
- LeetCode 572. 另一个树的子树(Subtree of Another Tree) 40
572. 另一个树的子树 572. Subtree of Another Tree 题目描述 给定两个非空二叉树 s 和 t,检验 s 中是否包含和 t 具有相同结构和节点值的子树.s 的一个子树包括 ...
- gitlab升级备份
一.备份有关备份和恢复的操作,详见我的另一篇博客:Gitlab的备份与恢复在开始升级之前,一定要做好备份工作,并记录好版本号.1.查看当前Gitlab的版本号 [root@gitlab ~]# cat ...
- leetcode最长回文
给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad" 输出: "bab" 注意: &qu ...
- windows10环境下的RabbitMQ安装_笔记
原文:https://blog.csdn.net/weixin_39735923/article/details/79288578 第一步:下载并安装erlang原因:RabbitMQ服务端代码是使用 ...
- quartz2.3.0（七）调度器中断任务执行，手动处理任务中断事件
job任务类 package org.quartz.examples.example7; import java.util.Date; import org.slf4j.Logger; import ...
- mvn: command not found in Jenkins slave
在Jenkins上添加了一个slave node, 并绑定了一个团队项目,通过shell来执行后续操作,结果卡在了 mvn: command not found 其实这个node上是配置了maven的 ...