今天小编跟大家讲解下有关html元素间的边距重叠问题与BFC ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关html元素间的边距重叠问题与BFC 的相关资料,希望小伙伴们看了有所帮助。
一、边距重叠常见情况1、垂直方向上相邻元素的重叠(水平方向上不会发生重叠)
2、 垂直方向上父子元素间的重叠二、BFC1、什么是 BFCBFC(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>div { width: 100px; height: 100px; background: #7b81ca; margin: 30px;}section { overflow: hidden;}div { width: 100px; height: 100px; background: #7b81ca; margin: 30px;}(2)解决浮动重叠问题 --为非浮动的元素创建 BFC
(常用于文字环绕图片的效果)
<body> <section></section> <div></div></body>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);}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>section { background: rgba(244, 220, 250, 1);}div { width: 100px; height: 100px; background: rgba(123, 129, 202, 1); float: left;}section { background: rgba(244, 220, 250, 1); overflow: hidden;}div { width: 100px; height: 100px; background: rgba(123, 129, 202, 1); float: left;}来源:爱蒂网