您現在的位置是:電腦技術吧?>? 組裝維修 ??>??元素浮動,浮動元素特點??>??正文詳情

元素浮動,浮動元素特點

邵語海2019-11-05 12:01:24 人圍觀
簡介什么是浮動根據css規范,浮動將從文檔流中移出,這不會影響塊框的布局,而只影響內聯框(通常是文本)的排列。因此,當其高度超過包含容器時,父容器將不會自動擴展以關閉浮動

按照CSS規范,浮動元素(floats)會被移出文檔流,不會影響到塊狀盒子的布局而只會影響內聯盒子(通常是文本)的排列。

因此當其高度超出包含容器時,一般父容器不會自動伸長以閉合浮動元素。

但是有時我們卻需要這種自動閉合行為,具體如何處理呢?  有一種做法就是在父容器內再插入一個額外的標簽,并令其清除浮動(clear)以撐大父容器。

這種方法瀏覽器兼容性好,沒有什么問題,缺點就是需要額外的(而且通常是無語義的)標簽,所以我個人不大喜歡。

  后來又有了一種新的方式,使用:after偽類動態的嵌入一個用于清除浮動的元素,這種方法和上一種原理一樣,不同的只是把這個額外的內容用CSS生成,但考慮到IE不支持:after不得不做了不少的hack。

這種方法兼容性一般,但經過各種hack也可以應付不同瀏覽器了,同時又可以保證html比較干凈,所以用得還是比較多的。

  再后來又有人發現將父容器的overflow設為除visible之外的值就可以在標準兼容瀏覽器中閉合浮動元素,IE自然又是不支持的,所以這種方法和上一種方法一樣都對IE做了不同處理(具體就是觸發layout),不同的就是overflow沒有:after偽類那么麻煩了,缺點也有,overflow可能會產生一些小沖突。

  在使用overflow之前還有過一種使用float的方法,就是讓父容器也浮動,這利用到了浮動元素的一個特性浮動元素會閉合浮動元素。

這種方式在IE/Win和標準兼容瀏覽器中都有較好的效果,但缺點也很明顯父容器未必想浮動就浮動的了,畢竟浮動是一種比較特殊的行為,有時布局不允許其浮動也很正常。

使用float雖然在IE和標準兼容瀏覽器中都能閉合浮動元素,但原理卻是不同的,IE/Win中float觸發了layout因而閉合了浮動,而在標準兼容瀏覽器中,float其實和上一種方法中的overflow原理一樣,產生了一個塊級格式化范圍這是CSS規范中提到的一種現象,它往往具有某種獨立性,特性之一就是會自動閉合內部的浮動元素。

  按照規范,以下類型的元素會產生一個塊級格式化范圍:  ●浮動元素,left或者right皆可。

  ●絕對定位的元素。

  ●inline-block元素,不過這個gecko目前不支持。

  ●table-cell類型元素,其實table,table-head-group,table-row什么的也都可以,還有inline-table(gecko不支持)也同樣,因為他們都會間接產生一個匿名的table-cell。

  ●overflow取值非visible的元素。

  所以,原來在標準兼容瀏覽器中我們也可以有這么多的方法閉合一個浮動元素,而且只需要CSS,無需其他。

順帶說一下以上除了overflow,其余都有一個附加效果就是自動收縮父容器寬度。

  而對于IE/Win,它有一套自己的體系,就是layout,具有layout的元素會自動閉合浮動元素,再來看看觸發layout的CSS屬性,會發現和上面的塊級格式化范圍有很多類似之處:  ●浮動元素  ●絕對定位元素  ●display:inline-block  ●zoom  ●width/height  ●overflow/overflow-x/overflow-y[IE7新增]  ●max/min-width/height[IE7新增]  以上來看IE中閉合浮動元素的方法也不少,自然也都有其局限性,要么有附帶效果,要么使用的是非標準屬性(無法通過驗證)。

  還要提一點的是display:inline-block,這個屬性對IE而言本身沒什么用,實際效果只是給一個元素暗地添加了layout,但是標準兼容瀏覽器是認得這個屬性的,所以要不影響這些瀏覽器,需要將display設回默認。

這里IE有一個bug,如果先定義了display:inline-block,然后再將display設回block(這兩個display要先后放在兩個CSS聲明中才有效果),那么layout不會消失,同時也不會影響其他瀏覽器,所以目前來說,這也算一個不錯的觸發layout的方法:  .gainlayout{display:inline-block;}  .gainlayout{display:block;}  所以要跨瀏覽器閉合浮動元素,可以選擇的方式還是很多的,如何搭配使用這些CSS屬性就要具體情況具體分析了,靈活應用條件注釋也很有必要,要是實在不行我們回過頭來還有clear可以用嘛。

版權聲明:本文由 邵語海 整理編輯。

原標題:如何居中一個浮動元素,元素浮動后display值

轉載注明出處:http://www.dn9ww09s.icu/assemble/11166.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦開機顯示器沒有反應,電腦開機顯示器沒信號的解決方法

    電腦開機顯示器沒有反應,電腦開機顯示器沒信號的解決方法 相關圖片電腦檢測不到顯示器他們都說計算機應該經常使用,否則很容易壞。但是電腦也有很長的壽命如果長期使用,還是會有問題的就像小編今天說監視器沒有信號一樣。那我們怎么解決呢接...

  • tenda路由器怎么設置,tenda路由器重置

    tenda路由器怎么設置,tenda路由器重置 相關圖片tendawifi使用路由器橋接功能可以使路由器網絡覆蓋范圍更廣。騰達路由器具有橋接功能。騰達無線路由器的設置特別簡單。它非常適合許多小的白色設置。那么如何設置tenda路由器呢騰達...

  • 標簽和標識的區別,行標簽和塊標簽的區別

    標簽和標識的區別,行標簽和塊標簽的區別 相關圖片單標簽有哪些(1)觀念的轉變:HTML5注重內容和結構,但不注重標題H組導航相關數據的表現/H組/標題導航菜單/導航文章H1標題:HTML5專題視頻教程/H1(2)聲明和標單標簽...

  • 如何關閉電腦自動更新win10,電腦關閉更新

    如何關閉電腦自動更新win10,電腦關閉更新 相關圖片關閉自動更新自動更新,這四個字最常用于手機或電腦軟件,以及電腦系統但小編今天不是來討論電腦更新的有用性的這是關于當我們不想讓電腦自動更新時如何關閉它。如何關閉自動...

  • HTML5有哪些新特性,HTML新特性

    HTML5有哪些新特性,HTML新特性 相關圖片h5css3新特性HTML5必須對每個人都很熟悉,因為有太多的媒體在討論這項技術。然而,你能確切地告訴HTML5帶來了哪些新功能嗎本文總結了html5帶給您的15個新特性,您必須簡述html5的新特性...

  • 數據線連接電腦沒反應,手機用數據線連接電腦沒反應

    數據線連接電腦沒反應,手機用數據線連接電腦沒反應 相關圖片跳過usb調試連接電腦當我們的手機連接到電腦上時,會出現輸入端口已經插好,但電腦沒有響應,無法檢測到手機的連接提示我們現在該怎么辦?今天,我要告訴你,當手機的數據線連...

  • 表格布局,表格怎么做

    表格布局,表格怎么做 相關圖片表格樣式今天,我帶了一個簡短的教程來制作和實現一個帶有ulli的css表。我聽說過去用css實現一個表是不好的,但是最好直接用傳統的表來實現。實際上,我不這么認為如果您ExceL如何...

  • 計算機丟失msvcr80,計算機丟失msvcr100

    計算機丟失msvcr80,計算機丟失msvcr100 相關圖片計算機丟失msvcp100當用戶一次運行程序時,由于計算機中缺少msvcr.dll,因此無法啟動程序。請嘗試重新安裝程序以解決此問題。“當時,我說不出話來,因為系統剛剛安裝好。怎么處理?...

  • 標簽的定義,給自己定義一個標簽

    標簽的定義,給自己定義一個標簽 相關圖片A標簽除了全局屬性之外,基本標記還有兩個屬性,即:href和target沒有內容值接口HTMLBaseElement:HTMLElement{attribute DO自定標簽...

  • 電腦開機藍屏怎么解決,電腦一直藍屏怎么辦

    電腦開機藍屏怎么解決,電腦一直藍屏怎么辦 相關圖片電腦藍屏怎么解決步驟為什么會出現藍屏?事實上,有很多原因,如硬件故障、刪除顯卡的更新驅動程序等,都可能導致電腦出現藍屏然后編輯會告訴你如何解決藍屏的問題當我們使用...

熱評文章

  • 電腦開機花屏,電腦花屏無法開機

    電腦開機花屏,電腦花屏無法開機 相關圖片電腦花屏怎么辦世界上每天都有那么多人使用電腦。所以每天,世界每個角落都有許多人面臨著不同的計算機問題今天,我將討論如何在電腦打開啟動屏幕時解決這個問題所以,伙計們...

  • 表單設計,html表單設計

    表單設計,html表單設計 相關圖片表單頁面設計許多css愛好者不喜歡html表格,尤其是在制作表單時。雖然現在是xhtml css的時代,但大多數表單仍然使用表布局進行設計。那么,有沒有更好的方法來使用純語工作流表單設...

  • 安全模式進不去,如何退出安全模式

    安全模式進不去,如何退出安全模式 相關圖片退出安全模式我們的電腦使用很長時間后,容易出各種各樣的問題這時我們需要安全模式。因為有時我們需要進入安全模式來改變系統的一些操作。所以問題是,如何進入安全模式所以...

  • 筆記本外接顯示器,筆記本外接顯示器掉幀

    筆記本外接顯示器,筆記本外接顯示器掉幀 相關圖片筆記本外接2k顯示器我們習慣每天做一件事。當我們突然有一天不去做的時候,我們感到很不習慣。這和使用電腦是一樣的。當我們習慣于使用大屏幕的電腦時,突然間我們不習慣使用小...

  • 拍照上傳,拍照上傳改本地上傳

    拍照上傳,拍照上傳改本地上傳 相關圖片本地相冊替換相機拍照在HTML5規范的支持下,webapp可以在手機上拍照接下來,我將解釋web應用如何使用手機拍攝照片,在頁面上顯示并上傳到服務器。一。視頻流HTML5媒體捕獲A拍照識別...

  • 在打印機上怎么掃描,打印機可以掃描嗎

    在打印機上怎么掃描,打印機可以掃描嗎 相關圖片打印機復印掃描一體許多辦公室的朋友經常用打印機打字。你可以看到房間里所有的人,你也可以在盒子里看到他們如果你是一個好人,你可以問一個人關于香煙的事,創建一個打印機...

  • css cursor,css overflow

    css cursor,css overflow 相關圖片css中opacity十字線;十字線光標呈現為十字線光標由十字線光標:指針表示;光標:指針表示;兩個是為了處理IE5而編寫的,IE5只識別指針css z index...

  • 騰訊管家電腦版下載,騰訊手機管家電腦版

    騰訊管家電腦版下載,騰訊手機管家電腦版 相關圖片騰訊安全管家電腦版就像我們使用手機時,通常會下載一些類似手機管理器的軟件來保護手機的安全電腦也是一樣的。計算機需要一些安全軟件來保護它們所以我今天要給大家介紹一種...

  • 對話框有沒有幫助按鈕,對話框沒有最小化按鈕

    對話框有沒有幫助按鈕,對話框沒有最小化按鈕 相關圖片labview單按鈕對話框下面常見的IE下載對話框有三個主要按鈕:運行、保存和取消在某些情況下,您不希望用戶單擊“運行”或“保存”按鈕。您可以在網頁中設置meta name=downlo點擊按鈕彈...

  • 筆記本電腦開機黑屏沒反應,筆記本電腦突然黑屏無法開機

    筆記本電腦開機黑屏沒反應,筆記本電腦突然黑屏無法開機 相關圖片筆記本電腦開機正常但是黑屏有時候,筆記本電腦真的能把我們的心情搞得一團糟。就像我們要打開電腦做生意一樣,只是電腦會打開黑屏。那種情緒真的,簡直難以形容所以我理解你...

關注微信

变脸官网查询