css浮動及其危害和解決方法

html元素有三種類型：

①、塊狀元素： 如div -------- display：block
②、內聯元素： 如span ------ display：inline
③、內聯塊元素：如input ---- display：inline-block

在標準流中，三種類型的元素呈現的方式不同
*display:block
元素會獨佔一行，多個block元素會各自新起一行
*inline 和 inline-block
元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行

如果想block元素像inline元素那些不會自動換行，可以用css的float屬性（浮動）
left --------- 元素向左浮動。
right ------- 元素向右浮動。
none ------ 默認值。元素不浮動，並會顯示在其在文本中出現的位置。
inherit ---- 規定應該從父元素繼承 float 屬性的值。

雖然浮動很方便，但是也帶來了一定的負面影響

浮動主要造成了父元素高度塌陷，以至於父元素很多像背景顏色，邊框等都不能正確的顯示出來

我們先來看一下正常的浮動效果

<div class="parent">
    <div class="child child1"></div>
    <div class="child child2"></div>
</div>

.parent{
    width: 300px;
    border: 3px solid black;
    background-color: yellow;
}
.child{
    width: 50px;
    height: 50px;
}
.child1{
    background-color: red;
    float: left;
}
.child2{
    background-color: blue;
    float: right;
}

正常的浮動效果

正常的效果如上圖所示：
我們可以看到父元素本來是設置的屬性

background-color: yellow
border: 3px solid black

都沒有顯示出來，就是因爲浮動造成的高度坍塌！

解決浮動的負面影響

解決後的效果圖

①、給父元素定義高度

.parent{
    height: 50px;
}

②、給父元素加上overflow：hidden

.parent{
     overflow: hidden;
}

③、給父元素加上overflow：auto

.parent{
     overflow: auto;
}

④、給父元素加上display: table

.parent{
     display: table;
}

⑤、在最後一個子元素上加一個div，使用clear：both

<div class="parent">
    <div class="child child1"></div>
    <div class="child child2"></div>
    <div style="clear:both;"></div>
</div>

⑥、父元素定義僞類：after

.parent:after{
    content:"";
    display:block;
    clear:both;
}

在實際開發中推薦使用第六種