我們知道網頁的佈局有兩大利器，“浮動”和“定位”。而浮動和定位都不離開div，所以可以清楚理解應用div盒子模型對網頁製作來說及其及其重要。

盒子模型：

浮動：浮動對應這網頁三大排版中的浮動排版（其他兩個是標準排版、定位排版）（css3中還增加了一些新的排版模型，例如：flex排版）。

設定基本語法

float:none;（預設值，元素不浮動，按照標準流排列元素）
float：left;（元素浮動在父級元素的左邊）
float：right;（元素浮動在父級元素的右邊）
float：inherit;（元素繼承父級元素的float屬性）

當float的屬性值等於left或是right時，將會引起元素浮動，元素將被視為塊級元素。而盒子一旦設定為浮動，將脫離文件流，此時文件流中的塊級元素表現的就像浮動元素不存在一樣，所以處理不當的話就會出現高度塌陷

高度塌陷：浮動元素脫離文件流，浮動後的元素無法撐開父元素。

解決方案： 1.設定父元素的高度解決父元素高度塌陷問題

<style>
.father{
width:330px;
height:200px;//設定父元素高度解決高度塌陷，如果不設定高度，子元素將無法撐開父元素
}
.son1{
float:left;
width:150px;
heigth:200px;
backgroundr：#111；
}
.son2{
float:right;
width:150px;
heigth:200px;
background:#666;
}
</style>

但是這種方法只能解決一些子元素高度固定情況，不推薦使用。

2.清除子元素浮動解決父元素高度塌陷 基本語法： clear：left；//在元素左側不允許有浮動元素 clear：right；//在元素右側不允許有浮動元素 clear：both；//在元素左右兩側均不允許有浮動元素

<style>
div{
padding:20px;
margin:20px;
background:#444;
border:1px solid red;
}
.div1,
.div2{
float:left;
}
.div3{
float:right;
}
p{
clear:both;
width:300px;
background:#456789;
border:1px solid green;
}
</style>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<p>在浮動排版中，任何顯示在浮動元素下方的HTML元素都會在網頁中上移。</p>
 

3.使用空div清除浮動解決父級元素高度塌陷的問題（在空div裡面使用clear：both；）

4使用偽元素清除浮動解決高度塌陷

<style>
.father{
width:300px;//父級元素沒有設定高度
border:1px solid red;
}
.father:after{
content:"";//為偽元素新增空的內容
display:block;//將偽元素轉化為塊級元素
clear:both;//清除兩側的浮動
}
.son2{
float:left;
width:120px;
heigth:100px
background:#ff0；
}
.son2{
float:right;
width:120px;
height:100px;
background:#aaa;
}
</style>
<div class = "father">
<div class = "son1"> float:left</div>
<div class = "son2"> float:right</div>

5.觸發BFC解決高度塌陷問題 （1）設定inline-block：對父元素設定display：inline-block；樣式，其將會轉化為行內塊元素，從而觸發BFC，使得行內塊元素包裹住浮動元素，從而解決父元素高度塌陷問題。 （2）設定父元素浮動：當父元素也浮動時，就會觸發父元素的BFC機制，從而也會包裹住浮動元素。（需要考慮設定父元素浮動後帶來的影響）

6使用overflow解決父元素高度塌陷的問題

<style>
.father{
width:330px;
overflow:hidden;
border:1px solid red;
}
.son1{
float:left;
width:150px;
height:100px;
background:#aaa;
}
.son2{
float:right；
width:150px;
height:100px;
background:#ccc;
}
</style>
<div class = "father>
	<div class = "son1> float :left</div>
	<div class = "son2> float:right</div>
</div>

以上是關於解決父元素高度塌陷的一些方法。 關於定位的相關內容，我們下次再見！ 希望大家多多關注，多多指正！！！