怎么樣子盒子能撐起父盒子？

從行內元素跟塊元素來看:

一般情況下，行內元素只能包含資料和其他行內元素， 而塊級元素可以包含行內元素和其他塊級元素.

1. 塊級元素內部可以嵌套塊級元素或行內元素，
2. 建議行內元素里面只嵌套行內元素，

行內元素只能包含內容或者其它行內元素，寬度和長度依據內容而定，不可以設定，可以和其它元素和平共處于一行；

而塊級元素可以包含行內元素和其它塊級元素，且占據父元素的整個空間，可以設定 width 和 height 屬性，瀏覽器通常會在塊級元素前后另起一個新行，

行內元素尺寸由內含的內容決定，盒模型中 padding, border 與塊級元素并無差異，都是標準的盒模型，但是 margin 卻只有水平方向的值，垂直方向并沒有起作用，

塊級元素當沒有明確指定 width 和 height 值時，塊級元素尺寸由內容確定，當指定了 width 和 height 的值時，內容超出塊級元素的尺寸就會溢位，這時塊級元素要呈現什么行為要看其 overflow 的值

當使用div+css布局時，會出現很多的div嵌套——父div內嵌套一個或多個的子div，默認情況下，父div的高度是auto——它可以被子div任意的撐大，

父div也可以有固定的高度(或寬度)，比如height:500px，那么如果子div的高度超過了這個值，在默認情況下，子div會超出父div的束縛，這就是溢位

以下是子盒子撐不起父盒子的情況:

1.如果父元素已經規定了高度，不會高度塌陷，但可能會溢位（如果子元素總高度超過父元素的話）

解決方法:overflow屬性,使多余部分不顯示
2.如果父元素沒有規定高度：常規流盒子在自動計算高度時，無視浮動盒子——高度坍塌
如果所有子元素都浮動，父元素沒有高度，這時候給父元素設定邊框的話，就會發現邊框保不住子元素;
如果存在沒有浮動的子元素，父元素高度取決于沒有浮動的子元素，所以如果浮動子元素高度更大的話，還是會塌陷

浮動:

定位體系之一,常用于布局，可以很輕松的達到靠左靠右的效果,就是布局后要處理浮動帶來的后續影響(父級高度塌陷)

常用語法:float:left左浮動/right右浮動/none不浮動;

任何元素都可以使用浮動，無論是塊級元素div、ul等等，還是行內元素都可以浮動

任何被宣告float的元素都會自動被設定成塊元素，有了塊級元素的各種特點，可以設定寬高，可以設定內外邊距，

浮動后盒子位置

（1）左浮動的盒子向上向左排列；

（2）右浮動的盒子向上向右排列；

（3）(第二個)浮動盒子的頂邊不得高于上一個盒子的頂邊(上邊在一條直線上)；

（4）若剩余空間無法放下浮動的盒子，則該盒子向下移動，直至具備足夠的空間可以容納盒子，然后再向左或向右移動，

常規盒子和浮動盒子同時存在

浮動盒子在擺放時會避開常規盒子

常規盒子會無視浮動盒子

常規盒子在計算高度時,無視浮動盒子(其余常規盒子高度低于浮動盒子,容易高度塌陷)

塊級盒子常規1在前,浮動避讓到第二行,常規2在浮動后面,但是無視浮動盒子,呈現上圖,大盒子是上面常規盒子的高度之和

因為沒有常規子盒子,常規盒子計算高度忽略浮動元素,高度塌陷

浮動帶來的影響

1、背景無法顯示
由于浮動的設定，如果對父級設定了CSS 背景 background、CSS背景顏色或CSS背景圖片，則父級元素將不能被撐開，所以導致CSS背景不能顯示，

2、邊框無法撐開
如果父級設定了CSS邊框 border 屬性，由于子級里使用了float屬性，產生浮動，父級不能被撐開，導致邊框不能隨內容而被撐開，

3、margin、padding 設定值無法正確顯示
由于浮動的設定，導致父級子級之間設定了 margin 或 padding 屬性的值不能正確表達，特別是上下邊的padding和margin不能正確顯示，

解決方法:清除浮動:

1.使用:after偽元素方法,

可以直接在元素上添加:after{添加下列內容},也可以直接使用.clearfix這個class屬性

.clearfix:after{

content: ""; /內容設定為空！！！/
display: block; /顯示為塊級元素！！！/
height: 0;
visibility: hidden;
clear: both; /清除浮動！！！/

}

通過3行代碼 content: ""; display: block; clear: both; (必須寫的內容)便可實作，

如果在IE6和IE7瀏覽器上使用，則需給clearfix添加一條屬性zoom:1;以觸發 haslayout ，

2.給父級設定高度

3.clear屬性,設定某側不許浮動

clear:both/left/right

3.隔墻法:

所謂“隔墻法”是指在元素里面或外面添加一堵“墻”，即塊元素，通過對其配置一定的CSS屬性，以達到清除浮動的目的，

外墻法 ：在元素與元素之間新增一個塊元素，并設定clear屬性，

<div > ... </div>
<div style="clear:both"> </div>
<div > ... </div>

內墻法 ：在父元素里的所有子元素之后新增一個塊元素（即父元素的last-child），并設定clear屬性

<div > 
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
    <div ></div>
</div> 

新增的塊margin-buttom不能使用,但是下個元素的buttom-top可以使用

這個方法所能體現的優點：1. 避免了多余標簽的使用； 2. 可以兼容大部分瀏覽器，

4.BFC方法,overflow方法:

overflow:hidden;可以解決子元素溢位問題,還能解決高度塌陷問題.這里父盒子的高度小于子盒子中浮動盒子的高度,這是塌陷問題,不是溢位問題,多出部分不會被裁

如圖,父級盒子是兩個盒子的高度撐起來的,沒有被裁掉的情況

overflow：hidden的意思是超出部分去掉，如果父元素height為auto，內部元素浮動，勢必會將內部元素全部隱藏，故計算出內部浮動高度順便清除浮動，

看到的一個理解：overflow: hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體，如果沒有明確設定包含容器高度的情況下，它要計算內容的全部高度才能確定在什么位置hidden，這樣浮動元素的高度就要被計算進去，這樣包含容器就會被撐開，清除浮動，深入理解overflow

實際原理:

BFC （Block Formatting Context）全稱是塊級格式化背景關系，用于對塊級元素排版，默認情況下只有根元素（body)一個塊級背景關系，但是如果一個塊級元素 設定了float:left，overflow:hidden或position:absolute樣式，就會為這個塊級元素生成一個獨立的塊圾背景關系，就像在window全域作用域內，宣告了一個function就會生成 一個獨立的作用域一樣，新開僻的BFC像是開僻了一個新的小宇宙，使這個塊圾元素內部的排版完全獨立隔絕，

BFC是一個獨立的布局環境，其中的元素布局是不受外界的影響，并且在一個BFC中，塊盒與行盒（行盒由一行中所有的行內元素所組成）都會垂直的沿著其父元素的邊框排列，
BFC內部的元素和外部的元素絕對不會互相影響，因此， 當BFC外部存在浮動時，它不應該影響BFC內部Box的布局，BFC會通過變窄，而不與浮動有重疊，同樣的，當BFC內部有浮動時，為了不影響外部元素的布局，BFC計算高度時會包括浮動的高度，

獨立的塊級背景關系可以包裹浮動流，全部浮動子元素也不會引起容器高度塌陷，也就是說包含塊會把浮動元素的高度也計算在內，所以不用清除浮動來撐起高度，overflow清除原理

如何觸發BFC

一個HTML元素要創建BFC，則滿足下列的任意一個或多個條件即可： 下列方式會創建塊格式化背景關系：

• 根元素()
• 浮動元素（元素的 float 不是 none）
• 絕對定位元素（元素的 position 為 absolute 或 fixed）
• 行內塊元素（元素的 display 為 inline-block）
• 表格單元格（元素的 display為 table-cell，HTML表格單元格默認為該值）
• 表格標題（元素的 display 為 table-caption，HTML表格標題默認為該值）
• 匿名表格單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）
• overflow值不為visible的塊元素 -彈性元素（display為 flex 或 inline-flex元素的直接子元素）
• 網格元素（display為 grid 或 inline-grid 元素的直接子元素） 等等，

BFC是什么?怎么觸發

BFC渲染規則

• BFC垂直方向邊距重疊
• BFC的區域不會與浮動元素的box重疊
• BFC是一個獨立的容器，外面的元素不會影響里面的元素
• 計算BFC高度的時候浮動元素也會參與計算

解決問題:解決高度塌陷,外邊距重疊

邊距重疊:是指兩個或多個盒子(相鄰或嵌套)的相鄰邊界(其間沒有任何非空內容,補白,邊框)重合在一起而形成一個單一邊界

解決這個問題的方法就是:破壞上面"相鄰邊界(其間沒有任何非空內容,補白,邊框)重合在一起"這個條件,
屬于同一個BFC的兩個相鄰的Box會發生margin重疊，所以我們可以設定，兩個不同的BFC解決重疊問題.

1.父子元素邊界重疊:子元素添加 margin-top ，父元素下移(margin-top對父盒子作用了),子盒子跟父盒子間的垂直距離不變.

.father{
 width: 500px;
 height: 500px;
 background-color: red;
 /* border: #000000 3px solid;	1. 給父元素添加邊框 */
 /* padding-top: 100px; 	2.給父元素添加內填充,用 padding 
 	替換margin-top */
 /* overflow: hidden; 	3.設定 overflow:hidden; */
 /* position: absolute; 	4.父元素設定絕對定位 */
 /* float: left; 	5.父元素設定浮動 */
 /* display: inline-block; 6.父元素修改元素型別 */
 	}

/* .father::before{
 content: "a";
 display: block; */
 /* overflow: hidden;  	7.使用偽物件選擇器，給父元素前添加
 	內容，雖然為空，但是添加屬性 overflow:hidden; 可以消除影響  */
 	}
————————————————

對子元素設定

son{
	width: 300px;
	height: 300px;
	background-color: green;
	margin-top: 100px;
	/* position: absolute; 	8.子元素設定絕對定位 */
 /* float: left; 	9.子元素設定浮動 */
 /* border: #000000 3px solid;	給子元素添加邊框無效 */
 	}

浮動元素和絕對定位元素不參與邊距合并，

父元素添加 overflow：hidden/auto ， display: inline-block；這兩種方法是將父元素轉化為BFC（頁面布局中一塊獨立區域，其邊距等屬性不受其他元素影響，）

給父元素添加 border 和 padding 可以消除，是從 css 觸發規范上解決問題

2.兄弟元素邊界重疊(絕對值大的邊界保留)上下盒子添加外邊距重疊問題
解決方法:定位,浮動,display修改型別

邊距重疊

補充:文字出現的鏈接有針對某一部分的解釋,借鑒學習并整理

標籤：其他

上一篇：前端事件基礎，一個簡單的事件觸發程式

下一篇：記錄--UNI-APP安卓本地打包詳細教程（保姆級）