亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

圍住浮動(dòng)元素的三種方法

learn_shifeng / 1886人閱讀

摘要：為了使包住浮動(dòng)元素，有以下方法。由于包含元素一定會(huì)包圍非浮動(dòng)元素，而且清除會(huì)讓這個(gè)子元素位于浮動(dòng)元素的下方，因此包含元素一定會(huì)包含這個(gè)子元素以及前面的浮動(dòng)元素。


    
    
It"s fun to float.




Here is the footer element that runs across the bottom of the page.

這是一張帶標(biāo)題的圖片，圖片和標(biāo)簽包含在一個(gè)section元素，section后面緊跟著一個(gè)footer元素。
接下來(lái)是CSS代碼：

section{border:1px solid blue; margin: 0 0 10px 0;}
img{float:left;}
footer{border:1px solid red;}

可以想象，浮動(dòng)圖片后標(biāo)題跑到了右邊，section也收縮到只包含文本的高度，footer也跑到了上面，緊挨著section。為了使section包住浮動(dòng)元素，有以下方法。

方法一：為父元素添加overflow:hidden 方法二：同時(shí)浮動(dòng)父元素 
section{border:1px solid blue; float:left; width:100%;}
img{float:left;}
footer{border:1px solid red; clear:left;}

浮動(dòng)section以后，不管其子元素是否浮動(dòng)，它都會(huì)緊緊地包圍（收縮包裹）住它的子元素，因此，需要用width:100%再讓section與瀏覽器同寬。另外，由于section也浮動(dòng)了，為了強(qiáng)制讓footer在section下方，要給它應(yīng)用clear:left。

方法三：添加非浮動(dòng)的清除元素

添加一個(gè)非浮動(dòng)的子元素，然后清除它。由于包含元素一定會(huì)包圍非浮動(dòng)元素，而且清除會(huì)讓這個(gè)子元素位于浮動(dòng)元素的下方，因此包含元素一定會(huì)包含這個(gè)子元素以及前面的浮動(dòng)元素。方法有兩種。

第一種：


    
    
It"s fun to float.

    




Here is the footer element that runs ...

CSS:

section{border:1px solid blue;}
img{float:left;}
.clear_me{clear:left}
footer{border:1px solid red;}

第二種：

第一種添加一個(gè)純表現(xiàn)性元素不太好，可以添加一個(gè)用CSS來(lái)添加這個(gè)清除元素的方法。


    
    
It"s fun to float.




Here is the footer element that runs ...


.cleatfix:after{
    content:".";
    display:block;
    height:0;
    visbility:hidden;
    clear:both;
}

以上三種方法的使用要因地制宜，比如，不能在下拉菜單的頂級(jí)元素使用overflow:hidden；不能對(duì)已經(jīng)靠自動(dòng)外邊距居中的元素使用“浮動(dòng)父元素”技術(shù)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111574.html

相關(guān)文章

  • 圍住浮動(dòng)元素的三種方法

    摘要：由于包含元素一定會(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)生...

    Bowman_han 評(píng)論0 收藏0

  • CSS 設(shè)計(jì)指南 學(xué)習(xí)筆記 二

    摘要：原文地址本篇文章是筆者的設(shè)計(jì)指南學(xué)習(xí)筆記的第二部分，由于最近都在準(zhǔn)備期末考的事，所以都沒來(lái)得及對(duì)設(shè)計(jì)指南進(jìn)行一些總結(jié)，沒有看之前第一部分的話也可以從這里傳送過(guò)去。 原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是筆者的 《CSS 設(shè)計(jì)指南》 學(xué)習(xí)筆記的第二部分，由于最近都在準(zhǔn)備期末考的事，所以都沒來(lái)得及對(duì) ...

    printempw 評(píng)論0 收藏0

  • CSS學(xué)習(xí)筆記(六) 元素定位

    摘要：方法一為父元素添加方法二同時(shí)浮動(dòng)元素方法三添加非浮動(dòng)的清除元素定位布局的核心是屬性，對(duì)元素盒子應(yīng)用這個(gè)屬性，可以相對(duì)于它在常規(guī)文檔流中的位置重新定位。絕對(duì)定位絕對(duì)定位會(huì)把元素徹底從文檔流中拿出來(lái)，然后相對(duì)于其他元素默認(rèn)是定位上下文定位。 1.盒模型 盒模型，就是 瀏覽器為頁(yè)面中的每個(gè) HTML 元素生成的矩形盒子。 這些盒子們都要按照 可見版式模型（visual formattin...

    浠ラ箍 評(píng)論0 收藏0

  • CSS入門指南-2：盒子模型、浮動(dòng)和清除

    摘要：會(huì)在元素內(nèi)容而不是元素后插入一個(gè)偽元素使用意味著中新增的子元素會(huì)被清除左右浮動(dòng)元素。這一篇主要介紹了盒子模型，浮動(dòng)和清除。 這是CSS設(shè)計(jì)指南的讀書筆記，用于加深學(xué)習(xí)效果。 上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動(dòng)。 盒子模型 所謂盒子模型，就是瀏覽器為頁(yè)面中的每個(gè)HTML元素生成的矩形盒子。這些盒子們都要按照可見版式模型在頁(yè)面上排布。 可見的頁(yè)面版式主要由三個(gè)屬性...

    ConardLi 評(píng)論0 收藏0

  • CSS入門指南-2：盒子模型、浮動(dòng)和清除

    摘要：會(huì)在元素內(nèi)容而不是元素后插入一個(gè)偽元素使用意味著中新增的子元素會(huì)被清除左右浮動(dòng)元素。這一篇主要介紹了盒子模型，浮動(dòng)和清除。 這是CSS設(shè)計(jì)指南的讀書筆記，用于加深學(xué)習(xí)效果。 上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動(dòng)。 盒子模型 所謂盒子模型，就是瀏覽器為頁(yè)面中的每個(gè)HTML元素生成的矩形盒子。這些盒子們都要按照可見版式模型在頁(yè)面上排布。 可見的頁(yè)面版式主要由三個(gè)屬性...

    charles_paul 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<