Quantcast
Channel: 小惡魔 – 電腦技術 – 工作筆記 – AppleBOY
Viewing all articles
Browse latest Browse all 325

CSS Clear Fix 小技巧

$
0
0

記的之前 evenwu 為了找尋外包 CSS 人才,出了一份考題,有提供上機考,真是佛心來的,還給用 Inspector 或上網。其中一題就是

第二題、如果一個X元素內的子元素通通 float: left 請問X元素本身會有什麼狀況?如果我要在X元素內下背景,卻沒有顯示,請問如何解決?

解決方式就是實作本身 clear-fix,或者是在元素後加上 clear: both 的標籤,大概就是底下的樣子

<div class="container">
    <div class="floated"></div>
    <div class="floated"></div>
    <div class="floated"></div>
    <p style="clear:both"></p>
</div>

如果是要在 container 實作 clear-fix,就必須透過 css before after。

.clear:before, .clear:after {
    content: "";
    display: table;
}
.clear:after {
    clear: both;
}

這樣只要在任何 element 加上 clear css 就可以了


Viewing all articles
Browse latest Browse all 325

Trending Articles


Presence Quotes – Positive Quotes


Vimeo 10.7.1 by Vimeo.com, Inc.


Girasoles para colorear


Love Quotes Tagalog


EASY COME, EASY GO


5 Tagalog Relationship Rules


“Mali man na ikaw ay ibigin ko, akoy iibig padin sayo”


RE: Mutton Pies (frankie241)


Vimeo 10.7.0 by Vimeo.com, Inc.


FORECLOSURE OF REAL ESTATE MORTGAGE


UPDATE SC IDOL: TWO BECOME ONE


Pokemon para colorear


Sapos para colorear


OFW quotes : Pinoy Tagalog Quotes


Tropa Quotes


“BAHAY KUBO HUGOT”


Re:Mutton Pies (lleechef)


Ka longiing longsem kaba skhem bad kaba khlain ka pynlong kein ia ka...


Long Distance Relationship Tagalog Love Quotes


HOY PANGIT, MAGBAYAD KA!