Introducing positioning
Positioning可以元素脱离normal document layout flow.
默认下，块级盒子的宽度是其父元素的100%，并且和它自己的内容一样高。行级盒子的宽度和高度都和它自己的内容一样大。
The normal layout flow是元素放置在浏览器视口内的系统。默认下，block元素垂直列出，每个出现在一个新行，并且在上一行的下面，它们由margin隔开。
inline元素不一样，它和其他的inline元素或者text内容在同一行，只要父级block盒子有空间就这么做，如果没有空间，那么超出的内容或元素会移动到新的一行里。
特性请看替换元素与非替换元素。
Static positioning
Static positioning is the default that every element gets -- it just means "put the element into it's normal position in the document layout flow --- nothing special to see here".
Relative positioning
相对定位和static定位很相似，除了一旦定位的元素在正常流中占据了位置，则可以修改其最终位置，包括使其与页面上的其他元素重叠。
简单概括，设置了relative后，脱离了文档流，原来的位置依然占据。通过left，right设置的值会与其他元素重叠。
position: relative;
Introducing top, bottom, left and right
使用top、bottom、left和right可以指定元素往哪个方向移动。举例来说：
div {
position: relative;
top: 30px;
/*表示举例原来的top30px*/
}
Absolute positioning
使用绝对定位，元素脱离文档流，原来的位置将不再保留。当设置了绝对定位后，它的位置也会改变。而使用top、right、bottom、left也将不一样了，它表示距离最近有定位属性的祖先的top或者right或者bottom或者left。
Positioning contexts
哪个元素是绝对定位的"包含元素"? 默认情况下，它是html元素--- 定位元素嵌套在body里，但在最终的布局中，它离页面边缘的顶端和左边30px，这是html元素。这更准确地称为元素的positioning context.
我们可以改变positioning content --- 绝对定位的元素相对于其定位的元素。这是通过在元素的其他祖先元素之一设置定位实现的。
div {
position: relative;
}
div p {
position: absolute;
}
Introducing z-index
定位元素会在未定位元素上面，但是当有多个定位元素的时候，我们如何考虑它们的层叠顺序呢?
如果有多个定位元素的话，后定位的元素会在之前定位的元素的上面，但是如何改变它们的顺序呢？
我们可以使用"z-index", 默认下，定位的元素z-index的值是auto，实际上是0。我们可以通过改变它的值来改变定位元素的层叠顺序。但是不可以改变未定位元素的层叠顺序。
Fixed positioning
Fixed position和绝对定位类似，但是fixed position 它相对的是浏览器的视口。不管浏览器是如何滚动的或者如何放大缩小的，它都相对的是浏览器的视口。
浮动
浮动过后的任何元素都成了block level element
简单例子
/* html */
<p>
This is my very impoort paragraph.
I am a distinguished gentleman of such renown that my paragraph
needs to be styled in a manner befitting my majesty. Bow before
my splendour, dear students, and go forth and learn CSS!
</p>
/* CSS */
p {
width: 400px;
margin: 0 auto;
}
p::first-line {
text-transform: uppercase;
}
p::first-letter {
font-size: 3em;
border: 1px solid black;
background: red;
float: left;
padding: 2px;
margin-right: 4px;
}
清除浮动
所有内容在浮动，如果不处理，那么就会很可怕。幸运的是有一个属性叫做clear，当将它应用到一个元素时，它基本上说"停止浮动到这里"--- 这个元素和它之后的元素都不会浮动，除非你应用一个新的float到另一个元素。
clear有三个值:
- left: 停止左侧浮动
- right: 停止右侧浮动
- both: 停止左右浮动
浮动的特点
- 浮动元素会脱离正常的文档流，按照其margin指定的位置相对于它的上一个块级元素(或父元素)显示。
- 浮动元素后面的块级元素的内容会围绕此浮动元素, 但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠其。
- 浮动元素后面的内联元素会向此浮动元素的外边距靠齐。
浮动造成的影响
- 对父元素的影响： 对于其父元素来说，元素浮动之后，它将脱离正常的文档流，所以它也无法撑开其父元素, 造成其父元素的塌陷。
- 对其兄弟元素(非浮动)的影响:
- 如果兄弟元素是块级元素: 该元素会忽略浮动元素的位置而占据它的位置，并且元素会处在浮动元素的下层，但它的内部文字和其他行内元素都会围绕浮动元素。
- 如果兄弟元素是内联元素：则元素会环绕浮动元素排列。
- 对其兄弟元素(浮动)的影响:
- 同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面。
- 相反方向的浮动元素：互不影响，在同一条水平线上，当空间不够时会被挤下去。
浮动问题
当对div用的百分比时，然后浮动刚刚好，但是如果要为div设置border、padding等等，那么可能就会超过100%或者父级盒子的大小，因此可以为div设置box-sizing: border-box。
另外一个问题, 当你有一下布局时：
<div>
<div class="fl">111</div>
<div class="fl">222</div>
</div>
<footer>333</footer>
.fl {float: left}
footer {margin-top: 50px;clear: left;}
因为使用了clear: left后，所以footer不在围绕浮动元素。但是你会发现，margin-top: 50px并不起作用。为了解决这个问题, 在HTML中添加新的div元素，并且设置它的class为clearfix。此时，可以取消了footer的clear:both;如下：
<div>
<div class="fl">111</div>
<div class="fl">222</div>
<div class="clearfix"></div>
</div>
<footer>333</footer>
.fl {float: left}
footer {margin-top: 50px;}
clearfix {clear: both;}
但是这只是简单的解决了这个问题而已。
因此概括一下清除浮动(我觉得应该叫闭合浮动更好一点儿，清除浮动只是清除了浮动，但是不能解决高度塌陷的问题)的几种方法：
- 第一个，像上面那样，但是没有语意化，并且增加了许多毫无意义的标签。
- 第二种，The Overflow Method, 设置overflow: auto或者hidden，就可以了，但是它不是专门用来闭合浮动的，而且要小心overflow后可能会隐藏或者出现滚动条。
- 第三种，推荐使用。
.clearfix:after {
content: ".";
display: block;
clear: both;
}
参考
All about floats
那些年我们清除过的浮动
BFC神奇背后的原理
BFC
BFC的中文意思是块级格式化上下文。它是一块独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相关。
哪些元素会生成BFC?
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex(关于这一点我是真的没有测试出来)
- overflow不为visible
BFC的布局规则
- 内部的box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边，与包含块的border box的左边相接触，即使存在浮动也是如此。
- BFC的区域不会和float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与运算。
BFC的作用与原理
- 自适应两栏布局
- 清除内部浮动
- 防止margin重叠
参考：
替换元素与非替换元素
替换元素(replaced element)：所谓替换元素就是浏览器根据元素的标签和属性，来决定元素具体显示什么内容。比如说：img标签的src属性的值用来读取图片信息并且显示出来。又比如说，input标签的type属性决定是显示输入框还是单选按钮。html中的img、input、textarea、object、video、embed都是替换元素。
非替换元素(non-replaced element): 是指内容包含在文档里的元素。比如p、span等等。
margin-top/margin-bottom与padding-top/padding-bottom
在考虑inline的时候，我们就需要考虑inline元素到底是行内可替换元素还是行内不可替换元素。
讨论margin-top和margin-bottom对行内非替换元素是否其作用:
- 规范允许margin可以设置到行内元素。
- 由于向一个行内非替换元素应用margin，对行高没有影响。
- 并且margin是透明的，所以声明margin-bottom, margin-top没有任何视觉效果。
- 而对于行内非替换元素应用左右的margin，是有影响的。
讨论margin-top和margin-bottom对行内替换元素是否其作用:
- 为行内替换元素设置margin会影响行高。
- 所以margin-top和margin-bottom是有视觉效果的。
- 对行内替换元素应用左右的margin，也是有影响的。
讨论padding-top和padding-bottom对行内非替换元素是否其作用:
- 明确是有作用的，可以设置背景颜色看出来。
- 不会影响block布局。
讨论padding-top和padding-bottom对行内替换元素是否其作用:
- 明确是有作用的，可以设置背景颜色看出来。
- 也会影响block布局的。
参考: