CSS边距重叠有什么处理方法？
发布时间：2022-01-20 15:50:33 所属栏目：语言 来源：互联网
导读：这篇文章给大家分享的是有关CSS边距重叠问题，在使用CSS排版布局时，会发现兄弟或者父子节点设置的上下外边距会发生重叠现象，那么这个重叠的问题要如何解呢？下面我们一起来了解看看。 style .out { width: 100%; background-color: pink; } .outdiv { heig
|
这篇文章给大家分享的是有关CSS边距重叠问题，在使用CSS排版布局时，会发现兄弟或者父子节点设置的上下外边距会发生重叠现象，那么这个重叠的问题要如何解呢？下面我们一起来了解看看。 <style> .out { width: 100%; background-color: pink; } .out>div { height: 100px; width: 100%; background-color: rgb(223, 136, 23); margin: 5px 0 10px; } </style> <section class="out"> <div>11</div> <div>22</div> <div>33</div> </section> 当我们查看整个section的高度时，其实本应该是345px的，由于父子和兄弟的外边距的重叠，会发现高度为320px。那么如何在实际应用中解决这个问题呢？ 创建BFC（全程块级格式化上下文）可以解决这个问题，首先明确下BFC的原理 BFC内的元素与外界元素之间互不影响，是一个相对独立的封闭区域； 相邻的BFC之间不会发生垂直边距的重叠，也就是说，想要元素外边距不重叠，就要创建一个BFC区域； BFC区域不会与浮动元素的box重叠； BFC在计算高度时，浮动元素也会被算在内； 如何创建BFC？ 1.设置overflow属性不为visible； 2.float不为none； 3.position的值不为static或者是relative； 4.display属性为table时； <style> .out { width: 100%; background-color: pink; overflow: hidden; } .out>div { height: 100px; width: 100%; background-color: rgb(223, 136, 23); margin: 5px 0 10px; /* overflow: hidden; */ float: left; } </style> <section class="out"> <div>11</div> <div>22</div> <div>33</div> </section> （编辑：青岛站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
