1. 程式人生 > >【css】浮動的影響及解決方法(父元素無高度,而子元素有高度)

【css】浮動的影響及解決方法(父元素無高度,而子元素有高度)

當一個元素內只包含浮動元素的時候,它會出現高度摺疊,即元素的上下底邊重合,即出現高度為0的情況,這樣會導致後面接著的內容與上面內容出現重疊現象,針對這個問題分享幾種解決方法:

1、直接給父元素設定height

ul {
    list-style-type: none;
    height: 30px; /*新增高度屬性*/
}

2、父元素設定overflow屬性值–auto|hidden

ul {
    list-style-type: none;
    overflow: hidden; /*新增高度屬性*/
}

3、子元素中新增一個同級空div,設定clear:both

<ul
>
<li>標籤1</li> <li>標籤2</li> <li>標籤3</li> <div style="clear:both;"></div> <!--新新增的空div,它和浮動元素同一級別,且位於最後--> </ul>

4.父元素新增zoom屬性,適用於IE

IE支援一個CSS屬性zoom,當定義了這個屬性之後在 IE 瀏覽器裡面就會自動適應高度了。設定為zoom:1,程式碼如下:

ul {
    list-style:none;
    zoom:1; /* 適用於IE */
}

5.利用偽元素:after
用這種方法時要為包含元素先新增一個類名,這裡為ul標籤設定的類名.clearUl

<ul class = "clearUl"> <!--為包含的外圍元素設定類-->   
<li><img src = "1.jpg" /></li>   
<li><img src = "2.jpg" /></li>   
<li><img src = "3.jpg" /></li>   
<li><img src = "4.jpg
" />
</li> <li><img src = "5.jpg" /></li> <li><img src = "6.jpg" /></li> </ul>
ul {   
list-style-type: none;   
width: 800px;   
background: blue;   
}   
li {   
float: left;   
}   
/*利用:after偽元素*/   
.clearUl:after {   
content:"";   
display: block;   
clear: both;   
}  

在:after為元素裡面用到了content屬性,這樣這條樣式的意思是在ul元素後面生成指定的內容,這裡生成的內容是一個空字串,因為只是讓它來消除ul標籤的高度摺疊,並不讓它顯示出來。還有,這條樣式裡有display屬性,要將他設定成block,這樣clear屬性才會起作用,因為清除操作只作用於塊級元素,它的原理是為要執行清除操作的元素新增上邊距,以此讓元素降到浮動元素的下面,而操作行內元素的上邊距不起作用

利用偽元素清除浮動的寫法

.clearfix:before,
.clearfix:after{
    content:"";
    display:table
    }

.clearfix:after{
    clear:both
    }

.clear{
    display:block;
    overflow:hidden;
    visibility:hidden;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
    clear:both
}

相關推薦

css浮動影響解決方法(元素高度元素高度)

當一個元素內只包含浮動元素的時候,它會出現高度摺疊,即元素的上下底邊重合,即出現高度為0的情況,這樣會導致後面接著的內容與上面內容出現重疊現象,針對這個問題分享幾種解決方法: 1、直接給父元素設定height ul { list-style-ty

AndroidAS報錯解決方法:Non-static method '*' cannot be referenced from a static context

轉載請註明出處,原文連結:https://blog.csdn.net/u013642500/article/details/80156306 【錯誤】 Non-static method '*' cannot be referenced from a static context

Git衝突與解決方法 Git衝突與解決方法

本文轉載自:https://www.cnblogs.com/gavincoder/p/9071959.html Git衝突與解決方法 1、git衝突的場景 情景一:多個分支程式碼合併到一個分支時; 情景二:多個分支向同一個遠端分支推送程式碼時; 實際上,push操作即是將

SSM報錯解決

  spring mvc mybatis 整合錯誤1 (放置事務註解的位置錯誤)(表現:直接訪問.jsp,.html報錯,寫一個測試類,測試mapper,報錯) org.springframework.beans.factory.parsing.BeanDefinit

CSS常見相容性問題解決方法

最近在研究瀏覽器相容性問題,所以準備寫篇愽客記錄一下(會持續更新); 瀏覽器的相容性問題,通常是因為不同的瀏覽器對同一段程式碼有不同的解析,造成頁面顯示不統一的情況。 我們為了讓頁面形成統一的效果,要針對不同的瀏覽器或不同版本寫出對應可解析的CSS樣式,所以

Hyper-VVirtualBoxVMware沖突的解決方法

列表 not 模擬 .html off 解決方法 have detect 命令 安裝Visual Studio以後可能會導致與VirtualBox、VMware產生沖突,這是因為安裝了Windows Phone SDK,沖突表現為: 打開VirtualBox、VMware

PHP上傳檔案大小限制問題 post_max_size對大小的影響解決方法

今天在操作php上傳的時候發現了一個問題,就是當php腳步上傳的檔案大小超過php.ini中post_max_size的限制的時候頁面不會給出提醒,檔案也上傳失敗,這個問題感覺應該算是一個另類,今天跟大家分享一下。 php.ini 配置對php上傳檔案大小的影響引數有:  

css相容IE8IE8以下偽類選擇器

前言:css偽類選擇器很好用,讓我們的工作變的更方便。但有個麻煩,IE8及IE8以下對很多偽類選擇器並不相容。這13個偽類選擇器是比較長用到的:這時會發現,IE9對這些偽類選擇器都能相容。IE8、IE7

Mapreduce從程式碼上解決Output directory already exists錯誤避免每次除錯都要手動刪除輸出資料夾

Mapreduce除錯很蛋疼的,它不會覆蓋上一次輸出的結果,如果發現輸出資料夾已經存在,比如我的除錯輸出資料夾是hdfs://192.168.230.129:9000/output,它會直接給你報如下錯誤: Exception in thread "main" org.ap

Vue學習筆記問題解決方法記錄

chart 管理 父頁面 路徑 面繪制 event for 直接 art 1、父組件傳遞 props 到子組件過程中,報錯或者沒有值。 參考鏈接:http://www.jb51.net/article/117447.htm 2、vue工程項目中style設置ba

MySQLMysql併發時經典常見的死鎖原因解決方法

https://www.cnblogs.com/zejin2008/p/5262751.html   1.    mysql都有什麼鎖   MySQL有三種鎖的級別:頁級、表級、行級。 表級鎖:開銷小,加鎖快;不會出現死

MySQLMySQL產生死鎖的根本原因解決方法

https://blog.csdn.net/qq_34107571/article/details/78001309   一、 什麼是死鎖 死鎖是指兩個或兩個以上的程序在執行過程中,因爭奪資源而造成的一種互相等待的現象,若無外力作用,它們都將無法推進下去.此時稱系統處於死鎖狀態

Keepalived兩節點出現雙VIP情況解決方法原創

1、故障現象 倆臺伺服器keepalived的vip在倆臺伺服器同時出現 A:10.70.12.72 B:10.70.12.73   2、問題分析 1)、先分析那臺伺服器在提供服務 A:10.70.12.72 B:10.70.12.73 可以看到是B機器72在對外提

css元素浮動到了元素元素沒有隨元素自適應高度如何解決

正常情況 如果子元素沒有設定浮動(float),父元素的高度會隨著子元素高度的改變而改變的。 設定浮動以後 父元素的高度不會隨著子元素的高度而變化。 例如:在一個ul中定義若干個li,並設定float='left' <!DOCTYPE html> <html lang="en"&g

MongoDBMongoDb的“not master and slaveok=false”錯誤解決方法 mongo連線從庫出現問題

連結mongodb報錯如下 2016-03-14T16:26:00.912+0800 E QUERY [thread1] Error: listDatabases failed:{ "ok" : 0, "errmsg" : "not master and slaveOk=false", "cod

HTML、CSS浮動影響解決辦法

  首先,什麼叫做浮動?通常情況下,元素都是按預設文件流排列,而浮動則是讓預設文件流下的元素漂浮起來水平排列。浮動排列順序不會發生改變,預設時誰在第一位,浮動時便排在第一個。   但是給元素設定浮動後會帶來一些影響:   (1)在父級沒有給高度的情況下,子級浮動,父級會沒有高度   (2)行內元素浮動後

計算機通訊FTP伺服器:主機環境配置+Serv-U安裝與破解+常見問題解決方法

搭建FTP伺服器,這事並不困難,照著下述步驟做,你也可以成為伺服器大神!!! 第一步,瞭解FTP的功能以及工作原理 這位博主寫得很通俗易懂,我就不班門弄斧了 第二步,主機環境配置 1.控制面板>程式>啟用或關閉Windows功能>… 照

程式除錯中的常見問題解決方法2017.9.27更新

1、CE(Compile Error)編譯錯誤 其實很多時候通過返回的錯誤資訊就能找出錯誤。 ①缺失符號,如下圖 第一句Error表示在“printf”前少了一個分號, 第二句Error表示在“return”前少了一個分號。 通常在錯誤行的

總結嵌入式Linux學習中遇到的問題解決方法

持續更新。。。(1)uboot中執行nfs 32000000  192.168.1.101:/work/nfs_root/uImage_new下載新核心時出現:TTT***ERROR:Cannot um

OpenCV筆記 11VS2013中執行OpenCV 3.0時常見錯誤解決方法

===========2016年10月29日更新================= 本次在筆記本中安裝VS2015和OPENCV 3.1.0參照毛新雲的教程的出現了諸多問題, 最後按照這篇部落格的步