H5浮動與定位

h5的奇妙之處就在於它的變幻莫測，接下來我想談一下我對定位浮動的認知。

什麼是浮動

首先要了解什麼是浮動：脫離文件流，預設在當前的行對既定的方向進行移動（預設橫排）。

用浮動可以解決什麼問題

使用浮動之前我們要想明白浮動都可以解決什麼問題：比如我們要放一排的div或是img，我們故可以通過除錯margin之類的屬性解決，但是有時會發現即便如此有時仍會產生空隙，我們就可以通過浮動來解決這一問題。再比如有時後我們需要一些標籤不會佔據文件流的顯示，這時候也可以選擇使用。

浮動會出現什麼問題

但是浮動往往會產生一些問題：如：浮動自定義換行，浮動坍塌，浮動遮蓋。

自定義換行：比如浮動往往是在遇到其他浮動塊或是到既定邊緣才會進行換行

浮動坍塌：因為浮動脫離文件流所以可以看起不再佔據位置，這樣就會導致父元素的長寬減小。導致子元素超出父元素

浮動遮蓋：也是因為脫離文件流的原因，與浮動塊同級的塊級元素會重疊。

怎麼清除浮動

因此我們要學會清除浮動，清除浮動就是為了解決上面的問題，有的解決方法是通過給float以外的塊設定好屬性，有的是清除浮動了，雖然兩者效果可能相同，但前者的維護性和書寫性實在是不很不友好，所以我主要寫後者。

5. 給浮動塊結尾乙個空div並設定上clear:both屬性。

其原理是float元素是不會在普通流中計算高度，擁有clear屬性的div是在普通流中的，通過「自動」增加上外邊距(margin-top) 實現撐開父元素

6.給浮動塊的元素加上乙個after的偽類並且設定為block 和 clear:both.

7.給浮動元素父容器加overflow:hidden.

什麼是定位？

定位position，由邊偏距和定位模式組成。

邊偏距，4個，分別是top、bottom、left、right：後面可以%，還可以px等。

重點記一下定位模式：相對定位，絕對定位，固定定位。

相對定位relative：每次移動都以自己左上方的點為基準移動；占有原來的位置。

絕對定位absolute：通過邊偏移來移動位置，但它完全脫標，完全不佔位置。 1. 父級元素無定位時，則子級元素的絕對定位以瀏覽器當前的螢幕為準； 2. 父級元素有定位時，則子級元素的絕對定位以最近的已經定位（相對、絕對、固定）的父級元素進行定位。

固定定位fixed：跟父級元素沒有關係，只跟瀏覽有關；固定定位完全脫標，不佔位置。

好了，以上就是我對浮動與定位的認知。