display：float 浮動詳解
在我剛開始學(xué)習(xí)CSS的時(shí)候，看到浮動這個(gè)概念，只知道是讓一個(gè)盒子向左或向右移動先口，也僅僅在一些簡單布局中使用，但后來遇到的許多坑讓我意識到瞳收，搞清楚浮動究竟是什么還是非常有必要的碉京。
通過查閱網(wǎng)上各種博客文檔等，我總結(jié)出了浮動的定義：所謂浮動螟深，就是讓一個(gè)元素脫離標(biāo)準(zhǔn)文檔流谐宙，漂浮在標(biāo)準(zhǔn)流之上，然后按照指定的方向向左或向右移動界弧，碰到父級邊界或者另外一個(gè)浮動元素停止凡蜻。
在前面的總結(jié)中已經(jīng)提到過什么是標(biāo)準(zhǔn)文檔流搭综，在布局的時(shí)候，浮動脫離標(biāo)準(zhǔn)文檔流是非常必要的咽瓷，比如我們想要讓幾個(gè)塊級元素并排顯示设凹，這時(shí)候用浮動就會顯得很方便。
在這篇文章中有關(guān)浮動的講解非常好：CSS浮動
其中作者總結(jié)了一個(gè)很重要的概念：
假如某個(gè)DIV元素A是浮動的茅姜，如果A元素的上一個(gè)元素也是浮動的闪朱，那么A元素會跟隨在上一個(gè)元素的后邊（如果一行放不下這兩個(gè)元素，那么A元素會被擠到下一行）;如果A元素上一個(gè)元素是標(biāo)準(zhǔn)流中的元素钻洒，那么A的相對垂直位置不會改變奋姿，也就是說A的頂部總是和上一個(gè)元素的底部對齊。
但浮動也會帶來一個(gè)很嚴(yán)重的問題：浮動元素脫離標(biāo)準(zhǔn)文檔流素标，會導(dǎo)致元素重疊或者父元素的高度塌陷称诗。
這時(shí)候就要用到清除浮動。
清除浮動头遭，顧名思義就是為了解決浮動帶來的一系列問題寓免，也可以理解為打破橫向排列。
在上述的那篇文章中计维，作者還有一個(gè)總結(jié)很重要：清除浮動的這個(gè)規(guī)則袜香，只能影響使用清除的元素本身，不能影響其他元素鲫惶。
下面來總結(jié)幾種常用的清除浮動的方式蜈首。
1. clear屬性
例如某個(gè)div元素前面的兄弟元素，如果有元素不想受到浮動元素的影響欠母，那么就在這個(gè)浮動元素上使用 clear:both即可欢策。
2.給父元素設(shè)置高度
一般父元素沒有設(shè)置高度的情況下，子元素浮動之后赏淌，父元素會忽略子元素的高度踩寇，導(dǎo)致父元素的高度產(chǎn)生塌陷，對于這樣的問題六水，可以給父元素設(shè)置高度來解決俺孙。
但這樣做必然要計(jì)算好高度值才能夠設(shè)置，因此除了給父元素設(shè)置高度缩擂，還可以用其他兩種辦法：
- 給最后一個(gè)元素設(shè)置clear：both
- 給父元素新建一個(gè)BFC
對于第二種方法鼠冕，在前面的文章中提到過添寺，創(chuàng)建一個(gè)BFC的辦法有很多胯盯，不過在清除浮動中，比較常用的是 overflow:hidden屬性计露。
overflow:hidden是干什么的呢博脑？W3C給出的定義如下：
overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情憎乙。其中hidden代表內(nèi)容會被修剪，并且其余內(nèi)容是不可見的叉趣。
給父元素設(shè)置這個(gè)樣式泞边，不僅可以清除父級內(nèi)使用float所產(chǎn)生的浮動，比起其他方法來說疗杉，顯得更簡潔明了阵谚。
但是好用歸好用，為什么設(shè)置了這個(gè)樣式就能夠清除浮動烟具？
查閱了網(wǎng)上的各路大神的文章之后終于有了結(jié)論：overflow:hidden的作用是超出元素框部分的內(nèi)容要被裁剪隱藏梢什，這個(gè)裁剪隱藏是根據(jù)高度來定的，如果高度的默認(rèn)值是auto朝聋，那么必須先要計(jì)算其中浮動元素的高度嗡午，也就是其真實(shí)高度，再去確定隱藏冀痕。overflow：hidden出發(fā)了BFC荔睹，使得這個(gè)元素中的子元素不能影響外部其他元素，所以必須要計(jì)算內(nèi)容的全部高度言蛇，才能確定在什么地方開始隱藏僻他。
3.：after方法
這種方法是利用：after和：before來在元素內(nèi)部插入兩個(gè)元素快來達(dá)到清除浮動的效果，原理類似于clear：both猜极。
示例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
outer {
zoom: 1;
}
.outer :after {
clear: both;
content: '.';
display: block;
width: 0;
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</body>
</html>
position屬性
position屬性有4個(gè)值中姜。
1.position：static
默認(rèn)值，元素都位于標(biāo)準(zhǔn)文檔流中跟伏，不會受到top丢胚、bottom、left受扳、right的影響携龟。
2.position：relative
relative所產(chǎn)生的定位為相對定位，這種定位是相對于元素本身正常的位置勘高，根據(jù)top峡蟋、right、top华望、bottom等屬性在標(biāo)準(zhǔn)文檔流中偏移的位置蕊蝗。
設(shè)置相對定位屬性的元素，無論如何移動赖舟，它原本所占的空間是不會變的蓬戚，就好像在教室里的座位，無論你怎么移動宾抓，你的座位始終在那里占著子漩。
而且豫喧，relative不會影響除自身以外其他元素的位置，大小幢泼。
3.position：absolute
absolute所產(chǎn)生的定位又稱為絕對定位紧显，這種定位是直接將元素從標(biāo)準(zhǔn)文檔流中拿出來，然后再使用top缕棵、right孵班、left、bottom等屬性來進(jìn)行定位招驴。絕對定位元素的位置相對于最近的已定位的父親重父，如果元素沒有已定位的父親，那么這個(gè)元素位置相對于根元素忽匈，也就是html房午。
絕對定位的元素層疊性由z-index屬性來控制，值越大丹允，表明優(yōu)先級越高郭厌，距離觀察者越接近。
絕對定位元素能夠脫離標(biāo)準(zhǔn)文檔流雕蔽，這一點(diǎn)和浮動有著異曲同工之妙折柠，同樣會造成父元素的塌陷，同時(shí)和浮動元素一樣懸浮在標(biāo)準(zhǔn)文檔流的上方批狐，還會遮住下面的內(nèi)容扇售。
還有一些在使用過程當(dāng)中應(yīng)當(dāng)注意的知識點(diǎn)：
- absolute能讓inline元素被“塊級”化。
- absolute能讓元素已有的float失效
- 相對定位元素一般用來作為絕對定位元素的容器塊嚣艇，也就是口訣：“子絕父相”承冰。
4.position：fixed
fixed和absolute基本一致，也完全脫離標(biāo)準(zhǔn)文檔流食零，但關(guān)鍵區(qū)別在于fixed永遠(yuǎn)是根據(jù)瀏覽器確定位置困乒，即使是窗口滾動他也不會動，所以叫做固定定位贰谣。
5.background-position
background-position一般用來設(shè)置背景圖像的位置娜搂。
一般有兩個(gè)值，如果僅規(guī)定了一個(gè)值吱抚，那么第二個(gè)值將默認(rèn)為center百宇。
background-position:top left;
還可以用百分比來表示，其中第一個(gè)表示水平位置秘豹，第二個(gè)表示垂直位置：
background-position：x% y%;
還可以用像素來表示携御，值表示的意義同上。
background-position：50px 100px;
參考資料
- 騰訊課堂前端NEXT課程資料文檔
- W3Cschool
- CSDN網(wǎng)站布局中position的值的用法
我的個(gè)人博客：http://chronosblog.top
我的微信公眾號：runtustory
CSS布局詳解系列索引：
