目录
如果学习到了定位和浮动这一块的内容，并且开始着手构建项目的话，在编写时往往会出现一些意料之外的布局问题，今天我们来详细说说这些问题和解决办法：
外边距重叠问题
我们在前面简单提到了这一问题，可是当时只是浅显的了解，今天我们深入分析这个问题，并提供解决办法：
所谓外边距重叠，分为两种，一种是兄弟元素的外边距重叠代码演示如下：
1.兄弟元素外边距重叠
<style>
.inner-box1,
.inner-box2 {
width: 100px;
height: 100px;
background-color: yellow;
margin-left: 20px;
border: 1px solid;
}
.inner-box1 {
margin-bottom: 10px;
}
.inner-box2 {
margin-top: 20px;
}
</style>
<body>
<div class="inner-box1">
</div>
<div class="inner-box2"></div>
</body>
此时两个盒子之间的距离由两个外边距之中较大的决定，也就是20px，如果两个盒子的距离都是负值则由绝对值较大的决定：
<style>
.inner-box1,
.inner-box2 {
width: 100px;
height: 100px;
background-color: yellow;
margin-left: 20px;
border: 1px solid;
}
.inner-box1 {
margin-bottom: -10px;
}
.inner-box2 {
margin-top: -20px;
}
</style>此时样式：
此时两个盒子的间距就是-20px,而如果两者的间距一正一负盒子之间的间距就是两者相加的值，这点有点不同，需要特殊记忆
<style>
.inner-box1,
.inner-box2 {
width: 100px;
height: 100px;
background-color: yellow;
margin-left: 20px;
border: 1px solid;
}
.inner-box1 {
margin-bottom: -10px;
}
.inner-box2 {
margin-top: 20px;
}
</style>此时样式如图：
此时两个盒子之间的距离就是20px-10px=10px
2.父子元素外边距重叠问题
上面的兄弟元素外边距重叠一般来说问题不是很大，可是父子元素外边距重叠问题会影响页面布局，需要及时解决。
所谓父子元素外边重叠问题，便是子元素的外边距会传递个父元素，导致父子元素同时移动，从而达不到应有的效果，这样说还是有些抽象，直接上代码：
<style>
.out-box{
width: 300px;
height: 300px;
background-color: pink;
}
.inner-box1 {
width: 100px;
height: 100px;
background-color: yellow;
margin-left: 20px;
border: 1px solid;
}
</style>
<body>
<div class="out-box">
<div class="inner-box1">
</div>
</div>
</body>
如果想把上方的黄盒子移动到大盒子下方，怎么办？很自然的我们想到设置小盒子上外边距的大小，那这样可行吗？我们试一试：将小盒子添加一行：
.inner-box1 {
margin-top: 20px;
}此时再看看：
我们发现，大盒子随着小盒子向下移动了20px，这就是我们说的子元素外边距传递给了父元素，对我们来说，本来想要对小盒子进行操作，现在这种情况会对我们进行困扰，因此需要解决，
那么又该如何解决呢？
我们提供了以下几种方法来解决：
1.对父元素设置一个外边框
这是一种最简单的处理方法，可以解决此类问题，不过一般情况下，并不推荐使用这种方法我们来看看实际代码：
.out-box{
width: 300px;
height: 300px;
background-color: pink;
border: 1px solid ;
}此时效果：
此时小盒子相对于大盒子向下移动了，之前说的不推荐使用这种方式，原因很简单，添加了边框样式，在我们编写代码处理问题时要尽量避免添加样式来处理问题，之后要将的消除浮动也是如此，添加一个div改变了代码的结构，这些都是不利于我们项目的检查和编写的，最优的方式是不改变原有结构来处理问题。
2.对父元素添加overflow：hidden 开启元素的BFC
所谓开启BFC，也叫格式化上下文，全称是Block formatting context，在开启元素的BFC后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素，这里一并介绍几种开启BFC的方法
1.设置元素浮动也就是设置float，可是元素浮动会导致新的问题，也就是父元素宽度丢失，这点在我们明天要说的解决高度塌陷的问题中会详细介绍
2.设置元素为inline-block，宽度也会同样丢失，也会出现其他问题(例如三像素问题)
3.将元素overflow设置为非visible，副作用较小，推荐使用
4.绝对定位 宽度同样丢失
注意：这几点都是开启BFC的方法并不是解决外边距重叠的方法，解决外边距重叠可以使用其中的第三个方法，注意这句话的语序
同样的看看代码演示和实例效果：
.out-box{
width: 300px;
height: 300px;
background-color: pink;
overflow: hidden;
}
可以很清楚的看到，在没有设置大盒子外边框的情况下，我们依旧解决了这个问题。
3.伪类的解决办法
本来这点是想明天说高度塌陷一并解决的，想想还是提前解释一下比较好，所谓伪类解决办法，如果经常查看网页源码的会发现，在一些网页的base.css库中经常有着
.clearfix:before,
.clearfix:after{
content:'';
display:table;
clear:both;
}的一段代码，需要清除浮动或父子元素外边距重叠的地方，会给父元素添加clearfix类来解决，其实这就是伪类的解决办法，通过before伪类，添加display：table，可以有效解决父子元素的外边距重叠问题。
今天就介绍到这里，明天会给大家介绍高度塌陷的解决办法，喜欢的话就关注我吧~~~