##浮動與定位
浮動可以理解成向網頁的元素發布乙個排列命令，它常用的值是left/right/none這三種，當為left的時候，元素從左向右排成一行，當為right時，元素從右向左排成一行當乙個元素或多個元素浮動以後，這個時候，一定要注意以下幾點：
當浮動了元素總的寬度大於外層的寬度的時候，這個時候，它一排放不下，會折反到下面來
浮動以後的元素會脫離當前的文件流（也就是我們所指漂浮在網頁上面），浮動以後的元素它外層的元素高度就無法撐開了
乙個元素使用了浮動以後它的寬度預設就為0，但是同樣可以使用width與height去設定
清除浮動的方式
當元素浮動以後，會對後面的布局有很大的影響，這個時候，我們會清除之前的浮動
所謂的清除浮動其實就是把之前漂浮起來的元素重新下去
使用clear:left/right/both
我們可以通過使用clear的屬性方式來設定元素的清除浮動。如果在布局的時候，發現前面的元素浮動以後，我們可以在後面的元素上面加上clear屬性來清除浮動
如果之前是根據浮動的本質現象是元素脫離文件流照成外邊的元素高度為0，這個時候，我們只要重新設定外邊的元素高度就可以了。但是我們又不能直接去設定外邊元素的高度（因為有時候我們根本就不知道設定為多少），這個時候，我們需要使用乙個css hack來解決這個問題float:left那麼我們就使用clear:left，如果是float:right那麼就使用clear:right，如果不知道，可以直接 寫clear:both
overflow:hidden
寫乙個特定的樣式來清除浮動（首選）
因為我們都知道浮動起來的元素它需要通過clear:both來進行清除，這個時候，我們可以單獨的寫乙個css樣式用來清除我們的浮動
.clearfix::after
[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-udggnzrm-1587354662389)(assets/1531290260104.png)]
以下我們如果再需清除涉浮動，只需要在外邊的元素上面新增乙個.clearfix的樣式就可以了
###定位
如果乙個元素要使用定位，那麼它必須使用position這個屬性，這個屬性他的屬性值有四個，常用的有如下三個
相對定位relative
元素相對於原來的位置在進行位置偏移
元素移動以後，依然還占用之前的位置
經過相對定位的元素，它相對於螢幕會向上提高乙個等級
相對定位沒有脫離文件流相對定位的塊級元素可以使用margin:auto居中(它沒有脫離文件流)
.div1
**說明：**元素向上偏移20個畫素，並且保留之前的位置絕對定位absolute
絕對定位預設是以瀏覽器在進行定位，例如left:20px指的就是距離瀏覽器左邊20px
當乙個元素進行絕對定位以後，如果它的外層元素裡面的任何一層有相對定位，這個時候，他就會以這一層的元素為標準開始定位（子絕父相）
絕對定位不占用原來的位置
絕對定位會脫離當前的文件流
乙個元素進行絕對定位以後，如果它是塊級元素，那麼它的寬度就不再是預設的100%，而是由裡面的內容進行撐開，但是，這個時候我們可以通過width與height來設定它的寬度與高度（它只是改變了元素的寬度，並沒有改變元素的性質：也就是沒有把元素由塊級元素轉行內元素）
如果乙個元素使用了絕對定位，那麼就不能夠使用margin:auto進行居中
絕對定位的元素會隨著瀏覽器滾動條的拖動而滾動
固定定位fixed
固定定位與絕對定位很像，它們都具備一定的特性
一定以瀏覽器為標準定位
乙個元素採用了固定定位以後，它的寬度預設為0，最終的寬度由裡面的內容來撐開，但是可以通過width與height來設定
固定定位不會隨著瀏覽器的滾動條而進行移動，但絕對定位會存在這種情況
固定定位會脫離文件流
固定定位不能使用margin:auto居中
靜態定位static
靜態定位就是position:static,這一種定位相當於清除之前的定位（一定不要用，因為根本就沒用）
乙個元素經過任何一種定位（static除外）以後，它會多出乙個軸出來(預設情況下，元素只有兩根軸x與y軸)，一旦有了定位的屬性以後，這個時候，它會有有乙個屬性z-index
關於子絕父相
所謂的「子絕父相」指的是當子級元素使用絕對定位以後，父級元素要使用相對定位來攔住下來的絕對定位。「子絕父相」裡面，父級元素不一定要使用相對定位才行，除了static以外的任何定位，我們都可以攔下絕對定位
當乙個元素在使用了固定定位fixed或絕對定位absolute以後，它的寬度與高度可以通過left/right/top/bottom來進行拉伸處理
##css中有那些屬性會對元素的寬度照成影響
如果要對元素的寬度與高度照成影響，無非就在兩個方面乙個元素如果由塊級元素(display:block)轉換成了行內元素(display:inline)以後，這個時候，它的寬度就不會再是預設的100%，而是由裡面的內容來進行撐開
乙個元素如果要脫流，只有兩種情況
浮動絕對定位，固定定位
當元素脫流以後，這個時候，它的寬度就不再是100%，而是由裡面的內容進行撐開的
在這個地方，我們同樣可以通過width去設定它的寬度
?脫流以後的元素不能使用margin:auto進行居中
當乙個元素的父級元素給了彈性盒子以後，裡面的子元素寬度就不再是100%，而是由裡面的內容去撐開的，但是仍然可以使用with去設定它的寬度 CSS浮動與定位
浮動 如果希望塊元素在頁面中水平排列，使用float浮動元素，脫離文件流 可選值 none 預設，元素在文件流中排列 left 元素脫離文件流，向頁面左側浮動 right 元素脫離文件流，向頁面右側浮動 元素浮動後，下邊的元素會立即向上移動 a浮動後，b會直接頂到上面 元素浮動後不會超出父元素邊框和...
CSS浮動與定位
css浮動 clear 向哪邊浮動，清除哪邊 clear left 在左側不允許浮動元素。clear right 在右側不允許浮動元素。clear both 在左右兩側均不允許浮動元素 clear none 預設值。允許浮動元素出現在兩側。clear inherit 規定應該從父元素繼承 clear...
CSS浮動與定位
1.1浮動 浮動 是指設定了浮動屬性的元素會脫離標準標準流的控制，移動到其父元素中指定位置的過程。它可以讓任何盒子可以在一行排列，目的用來布局。在css中，通過float屬性來定義浮動，其基本語法格式如下 float none left right選擇器 屬性值描述 left 元素向左浮動 righ...