一.margin的塌陷解决：
BFC （block format context）块级格式化上下文格式
display:inline-block
float:left / right
overflow: hidden
position: absolute
二.float
1.浮动元素产生了浮动流
2.所有产生了浮动流的元素，块级元素看不到他们，产生了BFC的元素和文本类属性（inline）的元素以及文本都能看到浮动元素,有点类似于叠层
3.清除浮动流
1.div{clear:both}
2.伪元素辅助（三件套解决浮动问题）
.wrapper::after{
content:'';
clear:both;（只有块级元素才能设置clear）
display:block;
}
。。。
<span>无聊</span>
伪元素（天生就存在，行级元素，可以当元素来操作，但是没有元素结构）：span::before , span::after{content:''}
如果想设置宽高，必须设置成Inline-block。
。。。
3.BFC帮助
position:absolute; float:left / right;打内部把元素转换成inline - block;意思就是你的内容有多少，边框就有多大，会紧紧局限
三.文字溢出处理（三件套）
white-space: nowrap (没有换行)
overflow:hidden （超出DIV就隐藏）
overtext:ellipsis（超出文本变成小圆）
四.加载问题
图片宽高
<div>淘宝网</div>
div{
display: inline - block;
background-image:url(#);
background-size:200px 80px;
200px;
height:80px}
要在图片没加载出来的时候，即删了CSS也能显示出东西
两个解决办法：
1.white-space: nowrap
overflow:hidden
text - indent :200px (文本缩进)
2.height:0px
overflow:hidden
padding-top:80px(通过padding-top来撑开)
五.行级元素只能嵌套行级元素
块级元素能嵌套任何元素
但是<p><div></div></p>是不可以的，p标签里不能套块级元素
还有<a><a></a></a>是不可以的，a标签里不能套a标签
六.解决图片间隔（因为inline和inline-block都是文本类属性，中间有文字分隔符）
1.margin-left:-6px，压缩后会重叠部分
2.但是上面的方法不太好，最好就是把<img><img>之间的空格去掉，然后显示的文本分隔符就会消失。
！调对齐方式，vertical-align