元素的浮動總結

常見的佈局方案有哪些？

• 流動佈局：遵循標準文檔流。。
• 浮動佈局
• float:left/right
• 層佈局（定位）
• flex佈局

浮動佈局是怎樣的？

• 因爲默認的流式佈局有不足。浮動初衷是爲了實現字圍（新聞）同時能夠讓塊級元素能夠並排顯示。 格式：float: left / right / none分別是左、右、不浮動，默認是不浮動。
• 1，在一個父元素內部，若是一個元素浮動了，那麼它就脫離了標準文檔流，後面的元素就會向上排列。下面兩個圖爲黃色div塊浮動先後。

• 浮動並無徹底地脫離了標準文檔流（破壞性--->flex），若是後面的元素內部有文字，這些文字會環繞在浮動元素的周圍，產生字圍。
• 若是多個元素浮動了，那麼這們就會並排顯示，若是都是同一個方向的浮動，它們會牢牢地貼在一塊兒。

• 若是一個元素浮動了，先向上移動，直到貼靠到父元素的邊界，接着，若是是左浮動，就向左移動，直到移動到父元素的左邊界，若是是向右浮動，就向右移動，直接移動到父元素的右邊界。
• 若是一個元素沒有設置高度，它的高度是靠裏面的內容撐起來的。若是父元素內部元素都浮動了，那麼會形成父元素的高度塌陷。若是父元素也浮動了，那麼就不會出現高度塌陷了

• 父元素高度塌陷的解決辦法有兩種:1，顯示加高度（加高法）2，overflow:hidden 代碼以下。

.father{
   width: 150px;
    /* height:150px; */
    background-color:red;
    border: 1px solid red;
   overflow:hidden;
    }
複製代碼

• 若是元素浮動了，它也會形成對後面的兄弟元素形成影響。解決辦法是加：clear:both/left/righ語句。
• 當一個浮動起來的男盒子，沒有設置寬高，那麼這個盒子的寬高會盡量的小，小到包裹住它裏面的內容。

  

• 若是一個女盒子浮動了，那麼就能夠設置寬高了，至關於把它變成男標籤。做用等同於display:boock
• 若是同時有左浮動和右浮動，須要把右浮動的元素寫在左浮動的前面
• 即便一個元素浮動了，那麼它也是受父元素的控制。當父元素寬度變小時，裝不下全部的子元素時，後面的子元素會表現出貼靠性。當父元素小到極限時，裏面的浮動的子元素寬度是不會改變的。