資訊專欄INFORMATION COLUMN
摘要：由于包含元素一定會(huì)包圍非浮動(dòng)的子元素而且清除會(huì)讓這個(gè)子元素位于清除一側(cè)浮動(dòng)元素的下方因此包含元素一定會(huì)包含這個(gè)子元素以及前面的浮動(dòng)元素。
浮動(dòng)元素脫離了文檔流,其父元素也看不到它了,因而也不會(huì)包圍它。這種情況有
時(shí)候并非我們想要的,下面向大家傳授三種圍住浮動(dòng)子元素的方法。記住,這三種
方法你都得掌握,這樣才能審時(shí)度勢(shì),選擇最合適的一種。
為了演示浮動(dòng)元素的行為,這種行為對(duì)布局會(huì)產(chǎn)生什么影響,以及解決這個(gè)問(wèn)題的
三種方法,我們首先要從一張帶標(biāo)題的圖片開(kāi)始。圖片和標(biāo)簽包含在一個(gè) section
元素中,而 section 元素后面跟著一個(gè) footer 元素?？梢园堰@個(gè) footer 元素想象成
很多網(wǎng)頁(yè)底部都會(huì)有的與頁(yè)面同寬的頁(yè)腳。
css樣式:
css section {
border: 1px solid blue;
margin: 0 0 10px 0;
}
p {margin: 0;}
footer{
border: 1px solid green;
}
html文檔結(jié)構(gòu)：
html
It"s fun to float..
現(xiàn)在的頁(yè)面效果如下：
現(xiàn)在我們看到的是常規(guī)文檔流,即塊級(jí)元素包圍著所有子元素,而且在頁(yè)面中自上
而下相互堆疊在一起。假設(shè)我們想讓圖片標(biāo)題位于圖片右側(cè),而不是像現(xiàn)在這樣位
于下方。運(yùn)用剛剛學(xué)到的知識(shí),我們知道實(shí)現(xiàn)這個(gè)目標(biāo)最簡(jiǎn)單的方式就是浮動(dòng)圖片。
試試看吧?，F(xiàn)在我們需要給圖片添加一個(gè)浮動(dòng)效果！
csssection img {
float:left;
}
浮動(dòng)以后以后的效果如下：
可以看到文字都圍繞在了圖片周?chē)?，但是這并不是我們想要的結(jié)果！
方法一:為父元素添加 overflow:hidden我們給section應(yīng)用overflow:hidden之后，達(dá)到了我們想要的布局效果
csssection {
border: 1px solid blue;
margin: 0 0 10px 0;
overflow: hidden;
}
效果圖如下：
方法二:同時(shí)浮動(dòng)父元素實(shí)際上, overflow:hidden 聲明的真正用途是防止包含元素被超大內(nèi)容撐大。應(yīng)用
overflow:hidden 之后,包含元素依然保持其設(shè)定的寬度,而超大的子內(nèi)容則會(huì)被容
器剪切掉。除此之外, overflow:hidden 還有另一個(gè)作用,即它能可靠地迫使父元素
包含其浮動(dòng)的子元素。
第二種促使父元素包圍其浮動(dòng)子元素的方法,是也讓父元素浮動(dòng)起來(lái)。
csssection {
border: 1px solid blue;
margin: 0 0 10px 0;
float: left;
}
section img {
float: left;
}
p {margin: 0;}
footer{
clear: left;
border: 1px solid green;
}
浮動(dòng) section 以后,不管其子元素是否浮動(dòng),它都會(huì)緊緊地包圍(也稱收縮包裹)住它的子元素。因此,需要用 width:100% 再讓 section 與瀏覽器容器同寬。另外,由于 section 現(xiàn)在也浮動(dòng)了,所以 footer 會(huì)努力往上擠到它旁邊去。為了強(qiáng)制 footer依然呆在 section 下方,要給它應(yīng)用 clear:left 。被清除的元素不會(huì)被提升到浮動(dòng)元素的旁邊。
方法三:添加非浮動(dòng)的清除元素第三種強(qiáng)制父元素包含其浮動(dòng)子元素的方法,就是給父元素的最后添加一個(gè)非浮動(dòng)的子元素,然后清除該子元素。由于包含元素一定會(huì)包圍非浮動(dòng)的子元素,而且清除會(huì)讓這個(gè)子元素位于(清除一側(cè))浮動(dòng)元素的下方,因此包含元素一定會(huì)包含這個(gè)子元素——以及前面的浮動(dòng)元素。在包含元素最后添加子元素作為清除元素的方式有兩種。
css.clear_float {
clear: left;
}
插入一個(gè)用于清除浮動(dòng)的空元素：
htmlIt"s fun to float..
同樣，更簡(jiǎn)潔的方式是聲明一個(gè)clearfix類， 然后把這個(gè)類應(yīng)用于section標(biāo)簽：
css.clearfix:after {
content : ".";
display : block;
height : 0;
visibility : hidden;
clear : both;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111025.html
摘要：為了使包住浮動(dòng)元素，有以下方法。由于包含元素一定會(huì)包圍非浮動(dòng)元素，而且清除會(huì)讓這個(gè)子元素位于浮動(dòng)元素的下方，因此包含元素一定會(huì)包含這個(gè)子元素以及前面的浮動(dòng)元素。 Its fun to float. Here is the footer element that runs across the bottom of the page. 這是一張帶標(biāo)題的圖片，圖片和標(biāo)...
摘要：原文地址本篇文章是筆者的設(shè)計(jì)指南學(xué)習(xí)筆記的第二部分，由于最近都在準(zhǔn)備期末考的事，所以都沒(méi)來(lái)得及對(duì)設(shè)計(jì)指南進(jìn)行一些總結(jié)，沒(méi)有看之前第一部分的話也可以從這里傳送過(guò)去。 原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是筆者的 《CSS 設(shè)計(jì)指南》 學(xué)習(xí)筆記的第二部分，由于最近都在準(zhǔn)備期末考的事，所以都沒(méi)來(lái)得及對(duì) ...
摘要：方法一為父元素添加方法二同時(shí)浮動(dòng)元素方法三添加非浮動(dòng)的清除元素定位布局的核心是屬性，對(duì)元素盒子應(yīng)用這個(gè)屬性，可以相對(duì)于它在常規(guī)文檔流中的位置重新定位。絕對(duì)定位絕對(duì)定位會(huì)把元素徹底從文檔流中拿出來(lái)，然后相對(duì)于其他元素默認(rèn)是定位上下文定位。 1.盒模型 盒模型，就是 瀏覽器為頁(yè)面中的每個(gè) HTML 元素生成的矩形盒子。 這些盒子們都要按照 可見(jiàn)版式模型（visual formattin...
摘要：會(huì)在元素內(nèi)容而不是元素后插入一個(gè)偽元素使用意味著中新增的子元素會(huì)被清除左右浮動(dòng)元素。這一篇主要介紹了盒子模型，浮動(dòng)和清除。 這是CSS設(shè)計(jì)指南的讀書(shū)筆記，用于加深學(xué)習(xí)效果。 上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動(dòng)。 盒子模型 所謂盒子模型，就是瀏覽器為頁(yè)面中的每個(gè)HTML元素生成的矩形盒子。這些盒子們都要按照可見(jiàn)版式模型在頁(yè)面上排布。 可見(jiàn)的頁(yè)面版式主要由三個(gè)屬性...
摘要：會(huì)在元素內(nèi)容而不是元素后插入一個(gè)偽元素使用意味著中新增的子元素會(huì)被清除左右浮動(dòng)元素。這一篇主要介紹了盒子模型，浮動(dòng)和清除。 這是CSS設(shè)計(jì)指南的讀書(shū)筆記，用于加深學(xué)習(xí)效果。 上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動(dòng)。 盒子模型 所謂盒子模型，就是瀏覽器為頁(yè)面中的每個(gè)HTML元素生成的矩形盒子。這些盒子們都要按照可見(jiàn)版式模型在頁(yè)面上排布。 可見(jiàn)的頁(yè)面版式主要由三個(gè)屬性...
閱讀 1167·2021-11-24 10:43
閱讀 3128·2021-11-22 09:34
閱讀 3561·2021-10-08 10:04
閱讀 3942·2021-09-23 11:58
閱讀 3128·2019-08-30 15:44
閱讀 496·2019-08-30 13:01
閱讀 1170·2019-08-28 18:07
閱讀 1460·2019-08-26 13:42
