三个模型
盒子模型
（盒子+外边距）
层模型
1.position: absolute 绝对定位 脱离原来位置进行定位，相对于最近的父集定位，如果都没有就用浏览器的边框。
2.position: relative 相对定位 保留原来的位置进行定位，相对于原来的位置
Z-index : 10; 与绝对定位配合使用，层级越大越靠近我们
浮动模型
（产生浮动流）,写浮动就要清除浮动流，清除对后续的影响。
触发bfc ： （block format content 块级格式化上下文） ----- 解决bug1
bug1: <margin塌陷问题>
bug2: <margin合并>
块级元素看不见浮动元素，但是触发bfc元素以及具有文本属性的元素，以及文本属性都能看见的浮动元素，并会排列到它的后面。
feature : 站队（行块级元素）
文字环绕图片的效果
只有块级元素可以清除浮动 display: block;
利用伪元素可以清除浮动，让父集包括子集
***************html结构************** <div class="wrapper"> <div></div> </div> ***************css样式*************** .wrapper ::after { content : " "; clear : both; display : block; } .wrapper { *zoom : 1; /*写兼容*/ }
了解完这三个模型后，我们还得知道CSS里面两个重要的知识点，两个BUG，O(∩_∩)O哈哈~，对，没错，之所以重要是因为他们到现在都没有被修复，所以很重要。
margin塌陷问题和合并问题
margin塌陷问题
塌陷，顾名思义，塌了，真塌了。当我有时候给一个子集加一个margin-top的时候，他的父集也跟着移动，你说惊不惊喜。不信塌给你看
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
.father{
width:200px;
height:200px;
background: red;
}
.son{
width:100px;
height:100px;
background: green;
margin-top:100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
在竖直方向上，当我们给子元素和父元素都加margin-top，并且子元素的margin-top大于父元素的时候，子元素会带动父元素一起动。
就上面的代码，我们给父集元素的margin-top设置为50px，效果图还是上面那样。如果父集设置为200px呢，我们来看看
很明显，父集带动子集一起动，并且margin-top是200px
总结，当给父集和子集都设置margin-top的时候，谁的margin-top值大，谁就厉害。
解决方法
这里我们要用到bfc进行解决，bfc全称block format content，直接翻译就是块级格式化范围，是W3C里面的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。每一个盒模型都有自己默认的一套渲染机制，里面会存在margin塌陷问题，这是我们需要另一套渲染机制进行渲染，这就要触发bfc了。
触发bfc的4种方法：1.overflow：hidden；
2.position：absolute；
3.float
继续拿最开始的子元素margin-top是100px，父元素margin-top是50px，但是加上一个overflow:hidden; 效果图如下：
这便解决的margin塌陷问题了，其余的方法大家有兴趣也可以自己试试。
margin合并问题
margin合并讨论的就不是父子结构了，而是兄弟结构了，说的就是两个结构一个设置margin-bottom，一个设置margin-top，最终浏览器取的是指大的那个，并不会相加，所以他们直接的间距并没有那么大，这就是margin塌陷问题。举个栗子吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
.son_1{
width:100px;
height:100px;
background: red;
margin-bottom:150px;
}
.son_2{
width:100px;
height:100px;
background: green;
margin-top:100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son_1"></div>
<div class="son_2"></div>
</div>
</body>
</html>
效果图
很明显，这里两个兄弟结构的间距为150px，而不是250px。这就是margin塌陷。
解决方法
方法1：我们可以在其中一个兄弟结构上加上一个父集标签，对父集元素触发bfc便可解决这一问题。（通常不采用，会有反效果）
* 方法2：再次设定margin
一般margin合并问题不解决。。。。。。。。。。。。。。。。。。。。。。好尴尬，说半天结果不用解决，，，，不过知道还是有好处的！！！
