文档流（定位流，普通流，浮动流）
1、普通流定位 static（默认方式）
普通流定位，又称为文档流定位，是页面元素的默认定位方式
页面中的块级元素：按照从上到下的方式逐个排列
页面中的行内元素：按照从左到右的方式逐个排列
但是如何让多个块级元素在一行内显示?
这里就引出了浮动定位
2、浮动定位 float
float属性 取值为 left/right
脱离文档流
3、相对定位 relative
元素会相对于它原来的位置偏移某个距离，改变元素位置后，元素原本的空间依然会被保留
语法
属性：position
取值：relative
配合着 偏移属性(top/right/bottom/left)实现位置的改变
4、绝对定位 absolute
如果元素被设置为绝对定位的话，将具备以下几个特征
1、脱离文档流-不占据页面空间
2、通过偏移属性固定元素位置
3、相对于 最近的已定位的祖先元素实现位置固定
4、如果没有已定位祖先元素，那么就相对于最初的包含块(body,html)去实现位置的固定
语法
属性：position
取值：absolute
配合着 偏移属性(top/right/bottom/left)实现位置的固定
5、固定定位 fixed
将元素固定在页面的某个位置处，不会随着滚动条而发生位置移动
语法
属性：position
取值：fixed
配合着 偏移属性(top/right/bottom/left)实现位置的固定
高度塌陷问题
在文档流中，父元素的大小会被子元素撑开。
HTML
1234567891011121314151617 |
<styletype="text/css">.a{border: 5px solid blue; }.b{width: 200px;height: 200px;background-color: pink; }</style><body><divclass="a"><divclass="b"></div></div></body> |
如图：
如果给子元素设置浮动，就会脱离文档流，导致高度塌陷。
因此下面的元素也会随之上移。
解决高度塌陷问题
- 元素浮动
- 设置父元素固定高度
- 触发BFC
BFC 定义
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素，反之也如此。
- 当元素出发BFC后会具有如下特点：
- 开启BFC后，元素不会被浮动元素覆盖。
- 元素垂直外边距不会传递给父元素。
HTML
123456789101112 |
<styletype="text/css">.cube{width: 100px;height:100px;background-color: black;margin: 100px; }</style><body><divclass="cube"></div><divclass="cube"></div></body> |
- margin理应有200px，实际上只有100px。
块的上外边距margin-top和下外边距margin-bottom会合并为单个边距，大小为单个边距的最大值
HTML
12345678910111213141516 |
<styletype="text/css">.cube{width: 100px;height:100px;background-color: black;margin: 100px; }.container{overflow: hidden; }</style><body><divclass="container"><divclass="cube"></div></div><divclass="cube"></div> |
- 用overflow：hidden出发BFC即可解决。
- 开启BFC后，元素可以包含浮动的子元素
如何触发BFC
- 设置元素浮动：使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
- 设置元素绝对定位
- 设置元素为inline-block：可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
- 将元素的overflow设置为一个非visible的值
- display:flex;display:flow-root;
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。 display:flow-root;副作用较小，但是不兼容IE，看情况使用。
最好的解决高度塌陷clearfix
CSS
123456 |
.clearfix::before,.clearfix::after{ content:'';display:table;clear:both;} |
此方法既能解决高度塌陷，又能解决子元素的margin传递给父元素的问题。
