之前是準備在博客園寫博客，然而界面有點過時陳舊了，自己寫得也不是很勤快，于是換到簡書這里來吧。簡書支持Markdown，書寫起來還是很舒服的。最近計劃持續更新博客，對基礎知識再做個自我梳理。
之前工作里有的不是很復雜的專題頁面因為圖省事，不自覺有點濫用position:absolute;，這是個不算好的習慣，于是回過神來再復習一遍定位和浮動。
position定位
（一）position的屬性
-
absolute：生成絕對定位的元素，相對于最近一級定位不是static的父元素來進行定位； -
relative：生成相對定位的元素，相對于其所在普通的文檔流位置進行定位； -
static:默認值，沒有定位，元素出現在正常的文檔流中; -
fixed:老IE不支持，和absolute一致，相對于窗口進行定位，當出現滾動條時，不隨著滾動而滾動； -
sticky:(CSS3)有兼容性問題，它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當卷動到屏幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。
（二）關于position使用一般會引發的問題
- 假如有一個默認100%寬度的div,一旦加上
absolute絕對定位，該元素立馬inline-block化，默認寬度就會自適應元素內部寬度，會導致頁面的寬高塌陷。 - 由于
absolute絕對定位的靈活性，對于普通的頁面布局，有時出于省事的原因很容易造成absolute/relative/top/left/z-index的濫用,這樣會使后期的擴展和維護造成麻煩
（三）position代碼示例
-
relative相對定位
對象2相對于自身文檔流原來位置移動，并還占據著文檔流，下面的黃色塊繼續按照它原來的位置往下排列，relative僅僅是視覺上位置變了。
<style>
body{color: #fff;}
.aa{width: 400px;margin: 0 auto;border: 2px solid #000;height: 400px}
#position1 {height: 100px;background: green;}
#position2 {height: 100px;background: blue;position: relative;top: 10px;left: 50px;}
#position3{height: 100px;background: yellow;color: #000}
</style>
<body>
<div class="aa">
<div id="position1">對象1</div>
<div id="position2">對象2</div>
<div id="position3">對象3</div>
</div>
</body>
-
absolute絕對定位
對象1absolut屬性相對于父級div偏移，脫離文檔流，寬高塌陷，在文檔流之上。
<style>
body{color: #fff;}.
aa{width: 400px;margin: 0 auto;border: 2px solid #000;height: 400px;position: relative;}
#position1 {height: 100px;background: green;position: absolute;top: 10px;left:50px; }
#position2 {height: 100px;background: blue;}
#position3{height: 100px;background: yellow;color: #000}
</style>
</head>
<body>
<div class="aa">
<div id="position1">對象1</div>
<div id="position2">對象2</div>
<div id="position3">對象3</div>
</div>
float浮動
（一）float的定義
float 屬性定義元素向左/右方向浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
float的值：left/right/none
（二）float實現文字環繞
帶有浮動屬性的元素也可以使元素inline-block化，具有包裹性，使得元素兼并了塊元素和內聯元素的的優點。帶有浮動屬性的元素會脫離標準流進行排列布局，脫離標準流后的浮動元素漂浮在正常塊元素上面，但是依然占據正常文檔流的文本空間，使得后面的文本以除了浮動元素之外的空間為排列基準，形成了文本環繞的效果。
<style>
.a{width: 200px;height: 400px;margin: 0 auto;border: 1px solid #000;}
.pic{float: left;}
p{font-size: 16px;line-height: 18px;font-family: "Microsoft Yahei"}
</style>
<body>
<div class="a">
<p>這是一段測試文字啦啦啦啦啦這是一段測試文字啊啊啊啊啊這是一段文字顯示吶吶吶吶這是一段文字顯示啦啦啦啦啦</p>
</div>```
###### （三）float浮動布局
標準文檔流從上到下排列。
div1向左float后，很明顯，高度塌陷，div2和div3和div1重疊。
###### （四）為什么要清除浮動以及清除浮動的幾個方法
由于浮動導致元素**高度塌陷**產生副作用，父級盒子的邊框不能被撐開，背景不能顯示，父子級間的`margin`和`padding`設置值不能正確被顯示。
<style>
.div1{width: 400px;border: 2px solid #000;}
.div2{width: 100px;height: 100px;background: blue;float: left;}
.div3{width: 100px;height: 100px;background: green;float: right;}
</style>
<body>
<div class="div1">
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
**方法1：**在父級結束前，添加一個子標簽`<div style="clear:both;"></div>`
<div class="div1">
<div class="div2">div2</div>
<div class="div3">div3</div>
<div style="clear:both;"></div>
</div>
**方法2：**在父級css屬性加上入`overflow:hidden;zoom:1;`或者`overflow:auto;zoom:1;`
**方法3：**在父級用zoom+:after方法，原理類似于`clear:both`,利用CSS方式`：after`在元素內部加一個`clear:both`的元素塊
.box1{zoom:1;}
.box1:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}
**方法4：**對父級設置合適的高度直接撐開
###### （五）float和JavaScript
IE瀏覽器：
`obj.style.styleFloat = "left";`
其他瀏覽器：
`obj.style.cssFloat = "left";`