摘要:寒假來了打算重新學(xué)習(xí)總結(jié)前端的知識要點以及前端領(lǐng)域出現(xiàn)的新東西,因此有了這個系列。在正常布局下中位于該浮動元素之下的內(nèi)容此時會圍繞著浮動元素。在父元素上設(shè)置屬性,如果此屬性設(shè)置為或者則可以達到清除浮動的效果。但要注意并不是專門用于清除浮動。
</>復(fù)制代碼
寒假來了, 打算重新學(xué)習(xí)總結(jié)前端的知識要點以及前端領(lǐng)域出現(xiàn)的新東西,因此有了這個系列。更多內(nèi)容可以去我的github: https://github.com/SGAMERyu
1. 浮動
Float是一個CSS定位屬性, 要了解他的目的和起源, 我們可以看看印刷設(shè)計, 在打印布局中, 可以將圖像設(shè)置到頁面中, 使得文本根據(jù)需要環(huán)繞他們。
;
而在頁面中浮動是這樣工作的: 浮動元素會脫離正常的文檔布局流,并吸附在其父容器的左邊/右邊(float: left/right)。在正常布局下中位于該浮動元素之下的內(nèi)容,此時會圍繞著浮動元素。填滿左側(cè)或右側(cè)的空間。
浮動元素仍然是網(wǎng)頁流的一部分,這與使用絕對定位的頁面不同, 絕對定位的頁面元素將從網(wǎng)頁的布局流中移除。
除了圖像環(huán)繞文字之外,浮動可用于創(chuàng)建整個網(wǎng)頁布局
在較小的布局中,浮動對布局也很有幫助, 如果我們使用float應(yīng)用到我們的圖像上,那么當(dāng)圖像改變大小時, 框中的文本將回流適應(yīng)
同樣的布局也可以通過容器上的相對定位和絕對定位來完成,這樣做的話, 文本將不會受到化身的影響,并且不能在大小改變時重新排版
Float的相對屬性是Clear, 一個擁有clear屬性的元素, 并不向像浮動元素的方向移動,而是會在浮動元素的下方
在上面的例子中, slidebar像右浮動,比Main Content內(nèi)容區(qū)域短,然后footer被移動到浮動所需的可用空間。要解決這個問題,我們可以給footer元素設(shè)置清除浮動時
</>復(fù)制代碼
#footer {
clear: both;
}
clear也有四個有效值, both是最常用的,清楚來自任意方向的浮動, left和right可以用來分別從一個方向清除浮動。
如果父元素只包含浮動的元素,那么他的高度就會塌陷。如果父元素不包含任何視覺明顯的背景,并不會有什么問題。但是更難的是這種情況
</>復(fù)制代碼
float before
float after
這樣輸寫代碼會造成這樣的情況
這樣使用浮動會在文本流中出現(xiàn)不自然的間隔中斷。而且沒有實際的方法來修復(fù)他
空div法: 在父元素中添加一個div,也可以是
元素獲取其他元素。
</>復(fù)制代碼
overflow: 在父元素上設(shè)置overflow屬性,如果此屬性設(shè)置為auto或者hidden則可以達到清除浮動的效果。但要注意overflow并不是專門用于清除浮動。
偽元素法: 使用偽元素來清除浮動,也是目前常用的方法
</>復(fù)制代碼
.clearfix{
zoom: 1;
display: block;
}
.clearfix:after{
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
</>復(fù)制代碼
閱讀原文: https://css-tricks.com/all-ab...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/112975.html
摘要:寒假來了打算重新學(xué)習(xí)總結(jié)前端的知識要點以及前端領(lǐng)域出現(xiàn)的新東西,因此有了這個系列。在正常布局下中位于該浮動元素之下的內(nèi)容此時會圍繞著浮動元素。在父元素上設(shè)置屬性,如果此屬性設(shè)置為或者則可以達到清除浮動的效果。但要注意并不是專門用于清除浮動。 寒假來了, 打算重新學(xué)習(xí)總結(jié)前端的知識要點以及前端領(lǐng)域出現(xiàn)的新東西,因此有了這個系列。更多內(nèi)容可以去我的github: https://githu...
摘要:轉(zhuǎn)行前端有哪些疑慮在人生的抉擇處,尋求一些別人的經(jīng)驗和總結(jié),無可厚非,但是決定了就一定要堅定的走下去,謹慎是為了更好的堅持,而不是放棄的理由。寫在前面這里前后端指的是開發(fā)的前后端。 轉(zhuǎn)行前端有哪些疑慮? 在人生的抉擇處,尋求一些別人的經(jīng)驗和總結(jié),無可厚非,但是決定了就一定要堅定的走下去,謹慎是為了更好的堅持,而不是放棄的理由。寫在前面:這里前后端指的是web開發(fā)的前后端。1、前端崗位需...
摘要:轉(zhuǎn)行前端有哪些疑慮在人生的抉擇處,尋求一些別人的經(jīng)驗和總結(jié),無可厚非,但是決定了就一定要堅定的走下去,謹慎是為了更好的堅持,而不是放棄的理由。寫在前面這里前后端指的是開發(fā)的前后端。 轉(zhuǎn)行前端有哪些疑慮? 在人生的抉擇處,尋求一些別人的經(jīng)驗和總結(jié),無可厚非,但是決定了就一定要堅定的走下去,謹慎是為了更好的堅持,而不是放棄的理由。寫在前面:這里前后端指的是web開發(fā)的前后端。1、前端崗位需...
摘要:轉(zhuǎn)行前端有哪些疑慮在人生的抉擇處,尋求一些別人的經(jīng)驗和總結(jié),無可厚非,但是決定了就一定要堅定的走下去,謹慎是為了更好的堅持,而不是放棄的理由。寫在前面這里前后端指的是開發(fā)的前后端。 轉(zhuǎn)行前端有哪些疑慮? 在人生的抉擇處,尋求一些別人的經(jīng)驗和總結(jié),無可厚非,但是決定了就一定要堅定的走下去,謹慎是為了更好的堅持,而不是放棄的理由。寫在前面:這里前后端指的是web開發(fā)的前后端。1、前端崗位需...
閱讀 2983·2023-04-26 02:04
閱讀 1290·2021-11-04 16:07
閱讀 3718·2021-09-22 15:09
閱讀 688·2019-08-30 15:54
閱讀 1910·2019-08-29 14:11
閱讀 2537·2019-08-26 12:19
閱讀 2264·2019-08-26 12:00
閱讀 767·2019-08-26 10:27