2. 程式人生 > >父容器div內的子元素div為float時，父元素無法撐開（或高度自適應）的解決方式以及css中position和float的介紹

父容器div內的子元素div為float時，父元素無法撐開（或高度自適應）的解決方式以及css中position和float的介紹

阿新 • • 發佈：2019-01-25

先簡單給出父元素無法高度自適應時的解決方案：

      第一種：在父容器上設定 overflow:auto或者hidden可以讓它自動包含子元素，從而具有了實際的height值。

      第二種：在子元素的最下面加上一個 空元素，並且設定clear:both，但是會增加沒意義的元素，一般會在最下面         加  一個空元素，然後再加上clear:both。
     第三種：結合clear屬性，使用clearfix通常搭配 :before 或者 :after 偽元素使用。使用偽元素就是在包含浮動元素                        的   父容器的前面或者後面創造一個隱藏的元素。 通過對:before 偽元素使用 display:table 來建立一個匿  名的  table-cell元素，從而防止子元素的top margin消失。這一招在IE6和7中具有一致的效果。同樣的，通  過置:after 偽元素來防止子元素的bottom margin消失。另外，需要對父容器使用*zoom 屬性觸發   hasLayout機制來解決IE6和7的一致性。hasLayout機制決定了元素應該怎樣渲染和框住它的內容，以及   元素間的位置 關係 。

     第四種：使用flexbox彈性模型，使用這種模型佈局，方便快捷，瞭解模型介紹，看我上篇博文，這裡給出具體程式碼，

HTML：    

 <body>
<ul id="box" class="box">
	<li class="littlebox"></li>
	<li class="littlebox"></li>
	<li class="littlebox"></li>
	<li class="littlebox"></li>
	<li class="littlebox"></li>
	<li class="littlebox"></li>
</ul>
 </body>
CSS： 
	#box
		{
			display:flex;
			flex-direction:row;
			flex-wrap:wrap;
			justify-content:flex-start;
			background:red;
		}
	.littlebox
		{
			width:100px;
			height:100px;
			margin:10px;
			background:blue;
			list-style-type:none;


		}

父元素主要程式碼:display:flex;      //顯示為flex模式,；
flex-direction:row;  // 子元素排列方式為row；
flex-wrap:wrap;//子元素換行方式為正常換行wrap；
justify-content:flex-start; // 子元素在主軸方向上的對齊方式為flex-start

前三種方式的程式碼見下面：

當構建頁面排版時，有不同的方法可以使用。使用哪一種方法取決於具體頁面的排版要求，在不同的情況下，某些方法可能好過於其他的方法。

比如，可以使用若干個浮動元素來構建一個整潔簡潔的頁面排版。或者，如果需要更復雜的排版要求，可以考略使用其他方法，比如使用相對定位和絕對定位。

在這篇文章中，我們首先要討論元素浮動；然後，我們要討論如何使用x,y和z軸控制元素的位置。

元素浮動

當構建一個頁面的排版時，使用元素浮動是一種直觀的方法去控制元素的位置。元素浮動可以讓一個元素靠近或者遠離另一個元素。它根據一個元素的大小和其父節點容器的大小來構造這個元素在排版中與其他元素之間的關係。

當一個元素被浮動時，這個元素是挨著前一個元素，還是出現在新的一行？這取決於它相鄰元素的位置。

當然，元素浮動在提供強大威力的同時，也帶來了很多問題。一個著名的問題就是，當一個父節點包括了若干浮動的子元素時，父節點的排版會考慮到浮動子元素的大小和位置，但是子元素並不會影響父節點的大小。在這種情況下，父節點的height變成了0，並且忽略其他屬性。很多時候，這個問題沒有被注意到，特別是當父節點沒有附合任何的CSS樣式，而且巢狀的元素也看上去被正確地排列了。

如果沒有正確地排列巢狀元素，那麼可能引發排版上的錯誤。請參閱下面的這個例子， 類名為.box-set的DIV容器應該有淺灰色的背景，但是因為其巢狀元素都是浮動元素，所以原本期望的背景色沒有出現。如果你檢視.box-set的盒模型，你會發現它的height值為0。

  1. <divclass="box-set">
  2.   <divclass="box">Box 1</div>
  3.   <divclass="box">Box 2</div>
  4.   <divclass="box">Box 3</div>
  5. </div>
  1. .box-set {  
  2.   background: #e8eae9;  
  3. }  
  4. .box {  
  5.   background: #8ec63f;  
  6.   height: 100px;  
  7.   float: left;  
  8.   margin: 10px;  
  9.   width: 200px;  
  10. }  

一個解決方法是在父容器閉合標籤前加上一個空元素，並且設定它的clear : both。“清除浮動元素”這一招可以解決大多數情況，但是它並不是“語義正確”的。隨著頁面上需要清除的浮動元素 的數量增加，需要的空節點的數量也隨之增加，但是這些空節點並沒有任何的HTML語義。

幸運的是，有一些其他技巧同樣使用，最著名的就是使用overflow和clearfix的技巧。


使用overflow

在父容器上設定 overflow:auto 可以讓它自動包含子元素，從而具有了實際的height值，這樣上例中的灰色背景將得到顯示。

在IE6中使用這一招時需要給父節點容器設定height或者width屬性。因為實際情況中height常常是可變的，所以是設定width的值。對於蘋果平臺上的IE，設定overflow:auto將會給容器增加滾動條，所以最好是設定 overflow : hidden 。

  1. .box-set {  
  2.   background: #404853;  
  3.   overflow: auto;  
  4. }  


這一招有些副作用。例如，需要增加樣式或者移動子元素超出了父容器的範圍時，比如實現邊框陰影或者加上一個下拉選單。在下面的例子中你將看到，當邊框陰影超出父容器的範圍時就會被遮蓋了，同時第二個子元素排列有問題。

使用clearfix

clearfix通常搭配 :before 或者 :after 偽元素使用。使用偽元素就是在包含浮動元素的父容器的前面或者後面創造一個隱藏的元素。通過對:before 偽元素使用 display:table 來建立一個匿名的table-cell元素，從而防止子元素的top margin消失。這一招在IE6和7中具有一致的效果。同樣的，通過設定:after 偽元素來防止子元素的bottom margin消失。

另外，需要對父容器使用 *zoom 屬性觸發hasLayout機制來解決IE6和7的一致性。hasLayout機制決定了元素應該怎樣渲染和框住它的內容，以及元素間的位置關係。

在下面使用clearfix的例子中，你將看到元素就算超出了父容器也可以顯示了。（注意邊框陰影）

  1. .box-set:before,  
  2. .box-set:after {  
  3.   content: "";  
  4.   display: table;  
  5. }  
  6. .box-set:after {  
  7.   clear: both;  
  8. }  
  9. .box-set {  
  10.   *zoom: 1;  
  11. }  


有效地包含浮動元素

具體使用哪一個技巧取決於你的個人習慣。有些人傾向於使用clearfix技巧，因為它在跨瀏覽器上的一致性更好。另一些人覺得clearfix需要更多的程式碼。因此，選擇哪個技巧不重要，重要的是註釋註明和寫進文件。

一個常見的實現就是給所有需要包含浮動元素的父容器一個統一的類名，方便管理樣式。比如使用下列程式碼，這樣只需給需要包含浮動元素的父節點加上 group的類名即可。

  1. .group:before,  
  2. .group:after {  
  3.   content: "";  
  4.   display: table;  
  5. }  
  6. .group:after {  
  7.   clear: both;  
  8. }  
  9. .group {  
  10.   *zoom: 1;  
  11. }  


Position屬性

有些情況下，你需要更多的對元素位置的控制，這時候就需要使用position屬性了。position屬性一共有五種不同的取值。

Position Static

這是position屬性的預設取值，意味著這個元素沒有也不接受任何對於該元素的位置偏移量屬性。

在下列的例子中，所有的盒子都將一個接一個的堆起來。因為它們都是塊級元素，並且沒有被浮動。

  1. <divclass="box-set">
  2.   <divclass="box box-1">Box 1</div>
  3.   <divclass="box box-2">Box 2</div>
  4.   <divclass="box box-3">Box 3</div>
  5.   <divclass="box box-4">Box 4</div>
  6. </div>

  1. .box-set {  
  2.   background: #e8eae9;  
  3. }  
  4. .box {  
  5.   background: #8ec63f;  
  6.   height: 80px;  
  7.   width: 80px;  
  8. }  


Position Relative

relative定位非常相識於static定位。最大的區別就是相對定位的元素可以使用偏移量：top, right, bottom, left。這四個偏移量可以讓元素朝任何方向移動，從而精確的控制顯示出來的位置。

注意，儘管相對定位的元素可以使用偏移量屬性，但是它在網頁排版時按照的卻是跟static position相同的方式（這點區別於fixed position和absolute position）。另外，相對定位的元素可以覆蓋其它元素，或者被其它元素覆蓋，儘管它自身並沒有偏移。

在下列的例子中，所有的盒子都是一個接一個的堆起來。但是他們按照各自被定義的offset相對於原本的位置做了改變。所以，有些盒子覆蓋了其他的盒子，而不是推開其他盒子。如果一個元素是相對定位（甚至它還做了偏移），它周圍的元素在排版時參考的依然是那個元素原本的位置（指在沒有偏移時的位置）。

  1. <divclass="box-set">
  2.   <divclass="box box-1">Box 1</div>
  3.   <divclass="box box-2">Box 2</div>

  4. 相關推薦

    父容器div內的子元素div為float時，父元素無法撐開（或高度自適應）的解決方式以及css中position和float的介紹

    先簡單給出父元素無法高度自適應時的解決方案：       第一種：在父容器上設定 overflow:auto或者hidden可以讓它自動包含子元素，從而具有了實際的height值。       第二種：在子元素的最下面加上一個 空元素，並且設定clear:both，但

    一個類，有新增元素（add）和獲取元素數量（size）方法。 啟動兩個線程。線程1向容器中新增數據。線程2監聽容器元素數量，當容器元素數量為5時，線程2輸出信息並終止

    override tac trace add syn countdown print import 數據 方式一： /** * 兩個線程要是可見的所以要加上votalile */public class Test_01 { public static void

    當對象或對象屬性為空時，如何安全給對象或對象屬性添加默認值

    方案 string sign isp ignorecas 兩種 對象 習慣 比較 今天遇到的問題，也是寫代碼的習慣問題，邏輯沒有問題，但不規範，也不安全， 容易出現漏洞。 先將代碼貼出： String isPrintLogo = vodInfoDto.getIsPrint

    【css】div父元素根據子元素高度自適應高度

    兩種情況(無特殊說明子元素都是指代父元素的第一級子元素) 第一種:若子元素沒有帶有float元素的元素,對於高度是自適應的沒有問題. 第二種:若子元素全是帶有float屬性的元素,這時候我們會發現父元素塌陷,高度為０,因為float浮動元素脫離了正常的文件流,

    父級overflow為scroll時，絕對定位的子元素會被隱藏或一起滾動

    需求：父級邊框固定，裡面的內容滾動 由於是圖片邊框，於是我把邊框的上下部分單獨切圖，中間重複部分平鋪 想要的效果圖： 一開始的寫法： html: <div class="paradise-wrap"> <div cl

    父類指針指向子類內存，為什麽當父類的成員函數不加virtual時，訪問的還是父類的成員函數，而不是子類同名的成員函數

    https 執行 子類 對象 類名 tail detail com 成員函數 我認為是這樣，類的成員函數都在代碼區，不同的類的成員函數在代碼區有自己的類名稱空間限制，類的虛函數在虛函數表中，程序執行的時候，是先在虛函數表中找該成員函數，如果沒有找到，就去該類在代碼區的成員函

    外層div隨內層div高度自適應

    1.0 高度 lang init nbsp flow -c col div高度自適應 首先說一下textarea的高度隨文字的內容自適應，用div模擬textarea。直接看代碼。其中 contenteditable="true"表示div可以編輯。。主要是設置 overf

    margin與padding值設定為百分數時，其值的計算參照最近父級元素width

    在前端開發過程中，設定樣式引數margin 與 padding 值為百分數時，其具體值的計算方法需參照最近父級的width計算。 1）exp1: margin-top 為百分數 其中標籤的巢狀關係為： <div class="boxparent">

    給子元素設定了margin後，父元素的跟著一起動了

    一般就是給父元素設定overflow: hidden;即可解決問題，之所以出現這種情況的原因是：普通文件流盒子間，只要垂直外邊距直接接觸就會發生合併，合併後外邊距視覺高度取兩個發生合併外邊距中較大者。發生這一現象的有三種情況：相鄰兄弟塊元素間、父元素及其首子元素和末子元素間

    【CSS黑魔法】父元素無高度情況下的子元素高度自適應方法

    前言： 　　此方法IE6以上（不包括IE6）瀏覽器均可行。 正題： 　　問題重現： 　　　　當一個沒有設定高度的父級元素下擁有兩個子元素（為了方便，就用兩個就好了，不代表一定是兩個），一個子元素有高度或被內容撐開（這時候父元素被撐開了），另一個子元素我們希望讓他高度根據父元

    當div的寬度為百分比時，如何設定高與寬相等

    今天做了一個demo，其中要用到圓形，首先想到的就是給一個div設定寬等於高，再加上border-radius等於寬的一半就好了div { width: 200px; height: 200px; border-radius: 100px; }

    如何讓高度自適應的div中的文字水平垂直居中

    weight pos overflow 最大 高度 absolut abs 自己 left 1.在做數據展示的時候，因為後臺沒有數據，為了提示用戶沒有數據，自己手寫了一個div中間顯示一個“暫無數據的字樣”， 然後控制顯示和隱藏，這樣方法有兩種： 第一種：設置display

    java基礎 靜態 static 問在多態中，子類靜態方法覆蓋父類靜態方法時，父類引用調用的是哪個方法？

    xtend java pos main 靜態方法 show extends ava pri 多態 package com.swift.jiekou; public class Jicheng_Tuotai_jingtai_diaoyong { publ

    達內科技NTD1712華為vlan定義，及簡單應用

    system blog interface config ethernet 地址 col tag efault Vlan的定義：是物理設備上連接的不受物理限制的用戶的一個邏輯組。 Vlan的作用：交換機可以分割沖突域，但不能分割廣播域，為了解決這個問題，

    div模擬textarea文本域輕松實現高度自適應

    body post HR word-wrap overflow out 模擬 target get <style> .textarea{ width:400px; min-height:20px; max-height:300p

    css-兩個div並排，左邊div寬固定，右邊自適應 的解決方法

    觸發 cal bfc order flex布局 one red splay CA <div class= "container"> <div class="left"></div> <div class="right"&

    讓裏面的div撐開外面的div,讓高度自適應

    css var 浮動 count lis head style oat height <!-- 設置clearfloat樣式，讓裏面的div撐開外面的div,讓高度自適應 --> <style type="text/css"> .clear

    jquery之div模擬textarea文字域輕鬆實現高度自適應

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="tex

    div裡巢狀iframe，設定iframe及div的高度自適應

    1. div+iframe <div class="main"> <iframe id="contentFrame" name="contentFrame" src="url" onload="javascript:reinitIframe(

    css佈局--父級元素高度自適應

      在專案中需要實現這樣一個佈局，子元素相對於父元素絕對定位，其中子元素的高度是確定的，希望父元素能夠自適應子元素的高度，實現兩個div的底沿對齊。 html: <head> <