首先，在介紹什么是浮動之前我們先介紹一下html中元素的普通流布局方式。在普通流中，元素是按照它在 HTML 中的出現的先后順序自上而下依次排列布局的，在排列過程中所有的行內元素水平排列，直到當行被占滿然后換行，塊級元素則會被渲染為一整行。如果沒有特殊樣式指定，所有元素默認都是按照普通流方式排列布局，即普通流中元素的位置由該元素在 HTML 文檔中的位置決定的。什么是浮動？??????浮動使元素脫離文檔普通流，漂浮在普通流之上的。浮動元素依然按照其在普通流的位置上出現，然后盡可能的根據設置的浮動方向向左或者向右浮動，直到浮動元素的外邊緣遇到包含框或者另一個浮動元素為止，且允許文本和內聯元素環繞它。浮動會產生塊級框(相當于設置display:block屬性)。

???????正是因為這種浮動的這種特性，所以本該屬于普通流中的元素浮動之后，父級元素的高度就可能會發生變化(父級元素內部由于不存在其他普通流元素了，其高度就為0)，在實際應用中，會嚴重影響整體的布局。

所以我們需要使用清除浮動和閉合浮動來處理浮動帶來的問題

????????清除浮動：對被影響文檔位置的塊級元素添加屬性clear：left | right | both | none;使其下移，直到元素兩邊沒有浮動元素。指使用clear阻止這個元素盒子的邊和前面的浮動元素相鄰的行為；

????????閉合浮動：是使浮動元素閉合，使父元素高度不再塌陷，高度被撐開了，使父元素能夠包圍浮動元素，從而減少浮動帶來的影響。指避免float無法撐高父容器的默認行為

這是兩者之間的區別：

閉合浮動的方法

1、添加額外的元素

main：wrap自己閉合浮動了，所以footer不用再清除浮動了(float:left) side：我也浮動了(float:left) footer：這次wrap人品爆發了, 通過在末尾添加了一個空標簽，已經閉合浮動了

優點：簡單，代碼少，瀏覽器支持好，不容易出現怪問題

缺點：初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，代碼語義化變差

原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度

2、使用偽類元素：新增.parent:after偽對象，其余不變

優點：瀏覽器支持好，不容易出現怪問題

.warp:after{ content: ".";/*生成一個元素內容為"."，為" "時也好用*/ display: block;/*讓元素為塊級元素*/ height: 0;/*用以下兩種方式讓元素不渲染*/ visibility: hidden; clear: both;/*清除浮動*/ }

3、父元素設置overflow:hidden?

.wrap{ margin:0 auto; width: 500px; border: 2px solid #EA2C0A; padding: 10px; overflow: hidden;/*新增*/ zoom:1;/*新增，針對IE6，但沒有經過測試*/???}//第二種，在parent容器中添加overflow：auto的屬性，并針對于IE6增加zoom:1的屬性。

優點：不存在結構和語義化問題，代碼量極少。

缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度。

4、父元素也設置浮動

????????只需給parent容器添加 float：left，也可閉合浮動。

　　?優點：代碼少

　　?缺點：會導致整個頁面大部分都處于浮動狀態，頁面布局容易出現問題

????????當然方法還有很多比如：display:table;改變盒模型屬性。還有給父級元素添加position:absolute定位等方法。

說到底閉合浮動或者清楚浮動的原理主要就是這么兩個原理：

• 通過在浮動元素的末尾添加一個空元素，設置 clear：both屬性，after偽元素其實也是通過 content 在元素的后面生成了內容為一個點的塊級元素；

• 通過設置父元素 overflow 或者display：table 屬性等來閉合浮動，其實這是觸發了Block formatting contexts (塊級格式化上下文，簡稱 BFC)。塊級格式化上下文是CSS可視化渲染的一部分。它是一塊區域，規定了內部塊盒的渲染方式，以及浮動相互之間的影響關系。

塊格式化上下文(BFC)有下面幾個特點：

???????BFC就像一道屏障，隔離出了BFC內部和外部，內部和外部區域的渲染相互之間不影響。BFC有自己的一套內部子元素渲染的規則，不影響外部渲染，也不受外部渲染影響。

???????BFC的區域不會和外部浮動盒子的外邊距區域發生疊加。也就是說，外部任何浮動元素區域和BFC區域是涇渭分明的，不可能重疊。

???????BFC在計算高度的時候，內部浮動元素的高度也要計算在內。也就是說，即使BFC區域內只有一個浮動元素，BFC的高度也不會發生塌縮，高度是大于等于浮動元素的高度的。

???????HTML結構中，當構建BFC區域的元素緊接著一個浮動盒子時，即，是該浮動盒子的兄弟節點，BFC區域會首先嘗試在浮動盒子的旁邊渲染，但若寬度不夠，就在浮動元素的下方渲染。

現在我們再來分析一下overflow清除浮動的原理：

??????當元素設置了overflow樣式，且值不為visible時，該元素就建構了一個BFC。.warp因設置了值為auto的overflow樣式，所以該元素建構出一個BFC，按照上面第三個特點，BFC的高度是要包括浮動元素的，所以.warp的高度被撐起來，達到了清除浮動影響的目的。overflow的作用就是為了構建一個BFC區域，讓內部浮動的影響都得以“內化”。

????? 至于哪些情況下，元素可以建構出BFC，大家可以自行查看CSS文檔對BFC的定義，這里就不再贅述了。

總結

以上是生活随笔為你收集整理的如何获取元素在父级div里的位置_关于元素的浮动你了解多少的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。