国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

圍住浮動元素的三種方法

learn_shifeng / 1828人閱讀

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


    
    
It"s fun to float.




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

這是一張帶標題的圖片，圖片和標簽包含在一個section元素，section后面緊跟著一個footer元素。
接下來是CSS代碼：

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

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

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

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

方法三：添加非浮動的清除元素

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

第一種：


    
    
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;}

第二種：

第一種添加一個純表現性元素不太好，可以添加一個用CSS來添加這個清除元素的方法。


    
    
It"s fun to float.




Here is the footer element that runs ...


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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111574.html

相關文章

  • 圍住浮動元素的三種方法

    摘要：由于包含元素一定會包圍非浮動的子元素而且清除會讓這個子元素位于清除一側浮動元素的下方因此包含元素一定會包含這個子元素以及前面的浮動元素。 浮動元素脫離了文檔流,其父元素也看不到它了,因而也不會包圍它。這種情況有 時候并非我們想要的,下面向大家傳授三種圍住浮動子元素的方法。記住,這三種 方法你都得掌握,這樣才能審時度勢,選擇最合適的一種。 為了演示浮動元素的行為,這種行為對布局會產生...

    Bowman_han 評論0 收藏0

  • CSS 設計指南 學習筆記 二

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

    printempw 評論0 收藏0

  • CSS學習筆記(六) 元素定位

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

    浠ラ箍 評論0 收藏0

  • CSS入門指南-2：盒子模型、浮動和清除

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

    ConardLi 評論0 收藏0

  • CSS入門指南-2：盒子模型、浮動和清除

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

    charles_paul 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<