Skip to main content

[CSS] Float, Clear Fix

Float 導致的 Collapsed#

當一個 parent element 只包含 floated 元素而沒有包含其他東西時,它的高會 collapsed:

img

清除浮動#

某些情況下我們會需要清除浮動,像是:

Imgur

或者:

Imgur

這時候有幾個不同的方式可以幫助我們清除浮動:

clearfix#

使用在 parent element 上,最常用的方法:

// html.container.clearfix    .block    .block    .block
// css
.clearfix:after {  content: ' ';  display: table;  clear: both;}

The Empty Div Method#

使用在 child element 的最後:

// html.container    .block    .block    .block    .clearfloat
// css.clearfloat {  clear: both;}

The Overflow Method#

使用在 parent element 上:

// html.container    .block    .block    .block
// css.container {  overflow: auto;}

程式範例#

Clear Float @ PJCHENder CodePen

參考文章#