### float
塊狀化的意思是：元素一旦float值不為none，則其display計算值就自動變成了block，不管你之前是內聯還是塊級。
兩側定寬，中間自適應：
```
.left { float: left; width: 70px; }
.right { float: right; width: 70px; }
.container {
margin: 0 70px;
}
```
### clear
clear的意思是：設置了clear屬性的元素自身如何如何，而不是讓float元素如何如何。
* none： 默認值，左右浮動來就來
* left：左側抗浮動
* right：右側抗浮動
* both：兩側抗浮動
```
li { width=height=20px; float: left; }
li:nth-child(3) { clear: both; }
```
你可能好奇為什么不是三行？
clear屬性是讓自身不能和前面的浮動元素相鄰，也就是說后面的浮動元素它是不管的。更進一步講，float為left時，clear: left有效float為right時，clear: right有效。其實，float為left時，both等同于left，float為right時，both等同于right。
clear屬性只有塊級元素才有效。而偽元素默認都是內聯，這就是平時借助偽元素清除浮動時需要設置display的原因：
```
.clear:after {
content: '',
display: table\block\list-item;
clear: both;
}
```
### BFC（！！！）
BFC全稱為塊級格式化上下文。如果一個元素是BFC，那么它的內部元素再怎么折騰都不會影響外部元素（比如absolute，再怎么折騰，會影響外層元素嗎？不會！）。所以，BFC元素是不可能發生margin重疊的，因為margin重疊是會影響外部元素的。BFC元素也可以用來清除浮動，因為如果不清除，子元素浮動會導致父元素高度塌陷，必然影響后面元素的布局和定位。
如何BFC？（滿足一個即可）
* html根元素
* float值不為none
* overflow值為hidden（常用）
* display值為table-cell或inline-block（常用）
* position為absolute或fixed
具有BFC特性的元素的子元素不會受外部元素影響，也不會影響外部元素。
舉個例子：
```
<div>
<img src="xxx.jpg"/>
<p>文字</p>
</div>
img { float: left; }
```
float為left后影響了原有的布局。
我們為p設置`overflow: hidden`讓p變成BFC（子元素也就是文本不會受外部元素float: left影響）。
再舉個例子：
```
<div class="father">
<div class="child"></div>
</div>
.father { border: 1px solid black; }
.child {
float: left;
width=height=100px;
background-color: red;
}
```
可以看到，float影響了father的布局。我們為father設置`overflow: hidden`，效果如下：
table-cell的特性：不管你給他設置多么大的寬，它都不會超過父級的寬。
### overflow
當子元素內容超過容器高度限制的時候，裁剪的邊界是`border box`，而非`padding box`。
在chrome瀏覽器下，如果容器可滾動，則padding-bottom也算在滾動尺寸之內，ie和firefox會忽略padding-bottom。
當滾動到底部時，chrome的效果：
ie和firefox的效果：
瀏覽器的差異會導致scrollHeight和其他值不一樣，因此，不要在滾動容器中設置padding-bottom，而是在最底部的子元素上設置margin-bottom。
在pc端，窗體滾動高度可以使用`document.documentElement.scrollTop`獲取，在移動端可以使用`document.body.scrollTop`獲取。
*** 文字溢出時的點點點效果：
```
.ell {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
```
錨點定位的兩種方法：
* id
* a標簽的href
```
<div id="here"></div>
<a name="there"></a>
<a href="#here">toHere</a>
<a href="#there">toThere</a>
```
在滾動元素上設置overflow: hidden，你會看見內容被裁剪了，滾動條也不見了。其實，內容并沒有被裁剪，滾動條也僅僅是隱藏了，鼠標無法滾動了而已。不信你用js更改滾動條的滾動距離或者錨點定位一下，你會發現和overflow: auto\scroll沒區別。
### absolute
絕對定位的寬與高均是針對參照物定位的。
正常流的width100%和height100%參考自father的`content box`，absolute則參考自參照物的`padding box`。absolute的top\right\bottom\left無視參照物的padding，始終從padding外側開始定位。absolute的margin和trbl是可以共存的，效果是二者之和。trbl的百分比同width和height，參照的是參照物的`padding box`，你就這么認為吧，絕對定位的所有百分比均參考的是參照物的`padding box`。
如果只設置了absolute而沒有指定trbl中的任何一個，那么元素的布局與正常流沒區別，唯一的區別就是它不占據空間了。舉個例子：
absolute的定位（不使用trbl）則不需要父元素設置為relative，當然，如果你設置的值是百分比就需要指定父元素為relative，否則它會一直向上尋找直到找到參照物并參考它的`padding box`作為百分比的值。
*** 父級的text-align會影響absolute（不管absolute的元素是內聯還是塊級），因此用它實現水平居中：
```
.father {
text-align: center;
}
.child {
display: inline-block;
position: absolute;
width=height=100px;
margin-left: -50px;
}
//原理：inline-block會在child前面產生幽靈空白節點，text-align: center使得幽靈空白節點居中于father。而child為absolute使其表現為無依賴的絕對定位，最終位于幽靈空白節點的后面。然后我們再使用margin-left調整位置。
//兼容edge瀏覽器
.father:before { content: ''; }
```
### absolute與overflow
以下幾種情況，overflow不會裁剪：
```
<div style="overflow: hidden;">
<img src="xxx.jpg" style="position: absolute;">
</div>
//子元素設置了absolute，不裁剪
```
```
<div style="position: relative;">
<div style="overflow: hidden;">
<img src="xxx.jpg" style="position: absolute;">
</div>
</div>
//overflow的父級元素是定位元素，不裁剪
```
```
<div style="overflow: hidden; position: relative;">
<img src="xxx.jpg" style="position: absolute;">
</div>
//overflow本身也是定位，裁剪，請與1做對比
```
```
<div style="overflow: hidden;">
<div style="position: relative;">
<img src="xxx.jpg" style="position: absolute;">
</div>
</div>
//overflow和定位元素之間還有一個定位元素，裁剪。請與2做對比
```
如果overflow的屬性值不是hidden，那么即使絕對定位元素高度比overflow元素高度還要大，也不會出現滾動條。
除了以上之外，當遇到absolute元素被裁剪或者fiexd固定定位失效時，看看定位元素的子元素是不是設置了transform。
### absolute的流體特性
當設置了trbl后，絕對定位才真正變成絕對定位元素。
絕對定位的height百分比直接參考參照物的`padding box`垂直方向，不需要從html、body開始一層層設置height。
### relative
相對定位設置trbl是相對于自身進行偏移的，有點像margin，但不會影響后面元素的布局。
```
//文字不動，只是div上移100
<div relative top-100></div>
<p>123</p>
//文字跟著div一起上移100
<div margin-top-100></div>
<p>123</p>
```
相對定位中，一切百分比均參考自父級的`content box`，注意是父級，而不是參照物。對于relative來說，參照物就是父級。垂直方向參考自父級的height。
與absolute不同，當relative的設置了對立方向（top-bottom、left-right）時，根據文檔流的方向保留，比如，正常文檔流下設置同時設置了trbl，只有tl生效。
定位元素的層級大于正常元素。
### fixed
fixed元素的參照物是根元素html。
我們往往使用fixed實現全屏模態框（將遮罩層設為fixed），但你會發現當模態框內容溢出時你去滾動它，正常文檔也會跟著滾動沒有鎖定。如果是移動端項目，阻止touchmove事件的默認行為可以防止滾動；如果是pc端項目，直接讓根元素overflow: hidden即可。
