浮動（float）知識點

浮動主要考察為什麼清除浮動和如何清除浮動的問題。

浮動場景：通常對於塊級元素我們是不設定高度的（天知道以後會不會加內容，另外設定了高度會帶來顯示問題），塊級元素的高度是靠子元素內容撐開的。這時，子元素設定浮動，子元素就會脫離文件流，此時父元素的高度就不能靠子元素內容撐開了，就會出現顯示（體驗）問題。

清除浮動是為了解決頁面父元素高度塌陷的問題。如何清除呢，這才是我關心的

方法一：使用 overflow: hidden（在父元素操作）

.clearfix {
    overflow: hidden;
}
複製程式碼

副作用是離開了這個元素所在的區域以後會被隱藏（ overflow:hidden 會將超出的部分隱藏起來），不推薦。。

方法二：新增一個標籤

在父元素裡面加一個標籤，標籤樣式

.clear {
    clear: both;
}
複製程式碼

副作用就是新增了一個無用標籤，不推薦。

方法三：使用偽元素來清除浮動

.clearfix {
    zoom: 1; // 為了相容IE
}
.clearfix: after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
複製程式碼

方法四：使用雙偽元素清除浮動

.clearfix {
    zoom: 1; // 為了相容IE
}
.clearfix:before,.clearfix:after {
    content: "";    
    display: block;    
    clear: both;
}
複製程式碼

清浮動前	清浮動後

居中知識點

使用 flex

.parent {
    width: 520px;
    height: 260px;
    background-color: green;
    display: flex;
    justify-content: center;
    align-items: center;
}

.child {
    background-color: pink;
    width: 300px;
    height: 150px;
}
複製程式碼

使用 transform（css3 屬性）

.parent-transform {
    width: 520px;
    height: 260px;
    background-color: green;
    position: relative;
}

.child-transform {
    background-color: pink;
    width: 300px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
複製程式碼

使用 margin 負值

.parent-margin {
    width: 520px;
    height: 260px;
    background-color: green;
    position: relative;
}

.child-margin {
    background-color: pink;
    width: 300px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -150px;
}
複製程式碼

使用 absolute 和 margin

.parent-absolute-margin {
    width: 520px;
    height: 260px;
    background-color: green;
    position: relative;
}

.child-absolute-margin {
    background-color: pink;
    width: 300px;
    height: 150px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
複製程式碼

使用 flex	使用 transform
使用 margin 負值	absoulte 和 margin

三欄佈局

浮動對策

左右兩欄浮動（脫離文件流），中間一欄通過 margin 左右值（左右兩欄的寬度以及欄外間距）,別忘了清浮動

.three-column-float {
    height: 200px;
    background-color: #ddd;
}

.float-left {
    float: left;
    width: 300px;
    height: 100%;
    background-color: deepskyblue;
}

.float-right {
    float: right;
    width: 300px;
    height: 100%;
    background-color: pink;
}
.float-center {
    height: 100%;
    margin: 0 320px;
}
複製程式碼

絕對定位對策

左右兩欄絕對定位（脫離文件流），中間一欄通過 margin 左右值（左右兩欄的寬度以及欄外間距）

.three-column-absolute {
    position: relative;
    height: 200px;
    background-color: #ddd;
}

.absolute-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 100%;
    background-color:deepskyblue;
}

.absolute-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background-color: pink;
}

.absolute-center {
    height: 100%;
    margin: 0 320px;
}
複製程式碼

浮動對策

絕對定位對策

本次程式碼 Github

遠遠沒有結束，後面會持續更新（請原諒我打未來牌，這些吹過的牛逼我會慢慢實現的）。

你可以...

上一篇：面試之道之 CSS 基礎