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