在元素的布局中，搞清楚决定元素位置的根本原因是理解网页的基础。
1 Box Modle
Box Modle是元素布局的基础，后续使用的padding、margin、border等术语都是关于Box Modle的。关于盒模型用一张图来展示如下所示：
盒模型表示了一个元素所占据的所有面积。关于Box Modle的详细介绍
2 display
display是一个非常重要的布局属性。
关于display的详细介绍
常用的display属性值有四种值，分别如下：
- none：此元素不会被显示。对于none来说，这个元素不会被显示在网页上，也不会占用对应的位置，相当于被注释掉了。
- inline：默认。此元素会被显示为内联元素，元素前后没有换行符。inline元素是不能直接设置宽高值的，它所占的宽高是根据元素里面的内容自动调整的。inline元素可以设置padding与margin值并正常显示，但是padding与margin对应的区域是不被占据的，也就是说这里的padding与margin无法将其他的元素顶开。但是设置所有文本类的属性，比如line-height与font-size是可以别把别的元素顶开的。
- block：此元素将显示为块级元素，此元素前后会带有换行符。对于block来说，，所有的Box Modle属性都是会占据自己的面积的，会把别的元素顶开。
- inline-block：行内块元素（CSS2.1 新增的值）。inline-block与block的区别主要在于inline-block不自带换行符。
元素都有自带的display属性，但是所有元素的属性都是可以通过css代码修改的。常见元素的display属性如下所示：
Tips
- 典型inline元素：span a img em
- 典型block元素：div body h1 p ol ul li
- 对inline元素设置宽高之后，在chrome中的控制台中显示的Box Modle宽高与设定值相同。
- block元素在设置好宽高以后，虽然显示的区域只有一定的宽度，但是同一行剩下的区域也会被其占据，这是因为block元素自带换行符。
- inline元素无法包裹block元素，但是a标签可以作用于block元素。
3 position
position是另外一个非常重要的布局属性。
关于position的详细介绍
position属性值有四种，分别如下：
- static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
- relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
- absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。
- fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
Tips
- relative定位的元素会占据其原来的空间，即使其自身已经被定位到了别的位置。
- 元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
- absolute相对于其最近的非static父级定位，如果没有则相对于整个网页定位。（并非相对于body定位，因为给body加border不会改变里面absolute元素的定位）
- 具有非static定位属性的元素，其本身已经脱离文档流，不会与static元素产生任何定位上的冲突。
4 float
float是一种与定位相关的十分复杂的属性。float属性诞生之初是为了实现文字对图片的环绕效果，现在主要用来实现网页的布局。
关于float的详细介绍
float属性值有四种，分别如下：
- left：元素向左浮动。
- right：元素向右浮动。
- none：默认值。元素不浮动，并会显示在其在文本中出现的位置。
- inherit：规定应该从父元素继承 float 属性的值。
Tips
- float元素也会脱离原来的文档流，但是任然会影响到文档流中的inline元素，产生定位冲突。
- 浮动元素会生成一个块级框，而不论它本身是何种元素。
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 使用float属性的一个隐患就是包含框可能看不见float元素，使得float元素不被包裹，这里就需要使用下面提到的清除浮动。
使用float属性来实现定位，很关键的一点就是浮动清除，否则就可能出现元素溢出包含框的情况。如图所示：
显然，清除浮动就是要通过各种方法，使得通过float来排版的内容能被父元素“看见”。而使得父元素能看见float元素的方法有两类：
- 使父元素成为BFC元素
- clear属性清除浮动
4.1 使父元素成为BFC元素
关于BFC的详细介绍
一个BFC元素是可以看到float元素的，这样就不会出现包不住的情况，触发BFC的方式有以下几种：
- float的值不为none
- position的值不为static或者relative
- display的值为 table-cell, table-caption, inline-block,flex, 或者 inline-flex中的其中一个
- overflow的值不为visible
- 根元素
使用这些属性来使得父元素触发BFC从而包裹浮动子元素，但是这种方法都是存在弊端的。比如，如果使用float属性，父元素虽然包裹了子元素，但是父元素又变成了float元素，又需要考虑父元素的浮动问题；使用position：absolute会影响到元素的定位等等。所以，如果本身父元素就具有这些属性，那么我们可以不用考虑子元素的浮动问题，但是不推荐使用这种方法来专门清除浮动。
4.2 clear属性清除浮动
关于clear的详细介绍
使用clear属性来清除浮动，核心思想就是添加一个可以看见float元素的clear元素，这个元素是可以被任何父级看到的，将这个clear元素放在float的下面，这样父级元素包裹claer元素的时候，自然也就包裹了float元素。再次出现这张图，下方右图就是一种使用clear元素让父元素成功包裹float元素的方法，通过在最下方放一个空的div来撑开父元素。
Tips
- 普通块级父元素虽然包不住float元素，但是float元素不会超出父元素的上界，即使float元素脱离了正常的文档流。而且，float元素不会越过父元素的上边框与左右边框，只会冲出下边框。
一个float元素会让出其本来占据的文档位置，而clear属性，就是让一个元素不要去float元素让出的位置。clear:left不会去float:left元素让出的位置，clear:right不会去float:right元素让出的位置，clear:both就是两种属性兼具。
Tips
- 如果前面有一个float:left的元素，一个clear:right的非float元素还是会跑到其让出的空间内。
所以，可以使用一个自身不占据任何空间的空元素来清除浮动。但是，这种行为有悖于“结构、行为、样式分离”的原则，虽然功能上可以实现，但是并不推荐使用。我们希望的效果是仅仅操作css文件就可以实现正确布局。此时就用到了目前使用最广泛的一种方法，就是使用伪元素来添加clear属性清除浮动。
关于伪元素的详细介绍
简单理解伪元素就是一类客观存在，可以被操作，但是默认没有任何内容的空元素。使用伪元素来清除浮动不需要修改html文件，不违背“结构、行为、样式分离”的原则。常用的方式为：
.title::after {
content: '';
display: block;
clear: both;
}依旧不能添加任何内容，单纯修改属性，需要注意的是display属性一定要设置为block才能实现清除浮动的效果，一个inline元素是无法完成浮动清除的。
5 总结
了解了上述所有的内容之后，任何静态页面的布局就都能实现了。只会使用某种特定的方法而不理解其中的原理，在遇到一些BUG之后就会很难理解其中的原因。能够深层次理解各种操作实现各种功能的原理，才能更好地分析各种各样的特殊情况。共勉。