一、理解标准文档流
是指 元素根据块元素或行内元素的特性按从上到下、从左到右的方式自然排列，这也是元素默认的排列方式。
标准文档流组成
块级元素（block）
<h1>…<h6>、<p>、<div>、列表
内联元素（inline）
<span>、<a>、<img/>、<strong>...
二、display属性
block：块元素，前后换行符
inline：内联元素，前后没有换行符
inline-block：行内块元素
none：无，设置元素不会被显示
三、浮动
1. float 浮动
要使块元素排列在一行还要支持宽高的方法除了使用display：inline-block外还有一种方法，就是浮动
float属性：left、right、none
2.clear 清除浮动
属性: left right both none;
3.解决父级边框塌陷的方法
一，浮动元素后面加空div：
利用clear属性能够实现外层元素从视觉效果上包围里面浮动元素的效果，其方法是在所有浮动的<div>后面再增加一个<div>。
... ...
<div class=”clear”></div>
.clear{
clear:both;
margin:0;
padding:0;
}
二，设置父元素高度
三，父级添加overflow属性
overflow:hidden;
visible：默认值。内容不会被修剪，会呈现在盒子之外
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
四，父级添加伪类after
<div id=”father” class=”clear”>...</div>
.clear:after{
content: ''; /*在clear类后面添加内容为空*/
display: block; /*把添加的内容转化为块元素*/
clear: both; /*清除这个元素两边的浮动*/
}
总结：
清除浮动，防止父级边框塌陷的四种方法
Ⅰ、浮动元素后面加空div
简单，空div会造成HTML代码冗余
Ⅱ、设置父元素的高度
简单，元素固定高会降低扩展性
Ⅲ、父级添加overflow属性
简单，下拉列表框的场景不能用
Ⅳ、父级添加伪类after
写法比上面稍微复杂一点，但是没有副作用，推荐使用
inline-block和float的区别
a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果
b.相同之处：能在某程度上达到一样的效果
C.inline-block存在的小问题:中间存在间隙，对父元素添加，{font-size:0}