先来分析一个现象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音悦台</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.div1{
width: 200px;
height: 200px;
background: blue;
}
.div2{
width: 100px;
height: 100px;
background: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
从中我们不难发现子元素和父元素的margin-top重合了。一般在项目中会经常遇到这种情况。那么又是为什么会遇到这种情况呢。这里就要扯扯BFC规则的概念了。
具体概念请参考这边文章，作者把几种情况都讲的很详细
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
这里我就简单说说bfc元素的规则和会产生的影响。
首先引用其中一些布局规则：
BFC布局规则：
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算
也就是说只要元素是bfc布局的那么它本身和内部的布局规则就符合其中的规则。且内外是互不影响的。这里的现象就是第二条规则所触发的。
为甚么呢？我一开始也是一脸蒙蔽。后来想了一下觉得应该就是这么理解的。
首先我们这个html元素就是遵守这个bfc布局规则的也就是说其子元素内的margin会发生重叠。我们案例中是父子相邻的两个元素所以他们会发生margin重叠也就是说父元素也发生了一个margin-top。如果解决这个问题的话就只要满足他们是不在同一个bfc box之下的条件就ok了。
我们给这个父元素设置一个overflow:hidden/auto就可以收拾这个情况了。
.div1{
width: 200px;
height: 200px;
background: blue;
overflow: hidden;
}
这是为啥呢？因为我们给这个父元素设置了overflow不为visible时它就成了bfc box元素。这时候子元素和父元素不在同一个bfc box之下就规避了margin重叠
其他影响元素成为bfc box元素的属性还有
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
还有在没有了解bfc概念之前我都是通过给父元素设置padding-top:1px 这个方法解决这个重叠问题。这里不深入讲述。因为我发现设置这个属性没有使父元素成为bfc box类型的元素。具体原因我也不知道可能就是使其不相邻了吧。
当然还有另一种相邻重叠就是上下元素之间的margin-bottom,margin-top。他们实际距离会取其中一个最大的作为之间距离。
解决方法也很简单。给其中一个包上一个父元素给父元素设置成bfc box 就可以了。
除了上面的重叠问题我们还可以利用bfc规则干很多事，比如内部清除浮动。
自适应布局拉等等。
对于bfc这个概念我个人觉得还是很有必要了解一下的。对布局上的理解和开发中奇怪的现象给出了一种理论解释。以前都是靠直觉解决。
今天就写到这里了。白白！
281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
