淺談BFC
原文合集地址如下，有需要的朋友可以關(guān)注
本文地址
合集地址
什么是BFC
BFC（塊格式化上下文）是CSS布局中的一個重要概念，用于控制塊級盒子的布局和定位。BFC是一個獨立的渲染區(qū)域，其中的元素按照一定的規(guī)則進行布局，與其他區(qū)域相互隔離。
BFC具有以下特性：
內(nèi)部的塊級元素在垂直方向上一個接一個地放置。這意味著塊級元素在垂直方向上不會重疊，而是按照其文檔流的順序一個接一個地排列。
塊級盒子在水平方向上盡可能地填充其容器。當(dāng)塊級盒子不能一行容納時，它會自動換行，并繼續(xù)填充下一行。
BFC區(qū)域內(nèi)的盒子與外部的元素相互隔離。這意味著BFC內(nèi)部的浮動元素不會影響到外部元素的布局，而且外部元素也不會影響到BFC內(nèi)部的布局。
BFC區(qū)域可以包含浮動元素。在BFC內(nèi)部，浮動元素會被約束在其容器內(nèi)，并且不會溢出到BFC外部。
BFC區(qū)域的邊界會包含其所有的子元素。這意味著如果BFC區(qū)域有浮動元素，BFC的高度會自動包裹這些浮動元素。
BFC規(guī)則：
BFC內(nèi)，盒子依次垂直排列。
BFC內(nèi)，兩個盒子的垂直距離由 margin 屬性決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊【符合合并原則的margin合并后是使用大的margin】
BFC內(nèi)，每個盒子的左外邊緣接觸內(nèi)部盒子的左邊緣（對于從右到左的格式，右邊緣接觸）。即使在存在浮動的情況下也是如此。除非創(chuàng)建新的BFC。
BFC的區(qū)域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算
如何創(chuàng)建BFC
有幾種方式可以創(chuàng)建BFC：
浮動元素：將元素的float屬性設(shè)置為除"none"以外的值（例如"left"或"right"），該元素就會創(chuàng)建一個BFC。浮動元素的所有子元素都會在BFC中進行布局。
.element?{
??float:?left;
}
絕對定位元素：將元素的position屬性設(shè)置為"absolute"或"fixed"，該元素就會創(chuàng)建一個BFC。絕對定位元素的所有子元素都會在BFC中進行布局。
.element?{
??position:?absolute;
}
display屬性為inline-block、table-cell、table-caption等：將元素的display屬性設(shè)置為"inline-block"、"table-cell"、"table-caption"等，該元素就會創(chuàng)建一個BFC。
.element?{
??display:?inline-block;
}
overflow屬性不為"visible"：將元素的overflow屬性設(shè)置為"auto"、"scroll"或"hidden"，該元素就會創(chuàng)建一個BFC。
.element?{
??overflow:?hidden;
}
根元素是BFC：整個文檔的根元素（html）會自動成為BFC。
BFC的應(yīng)用
BFC（塊格式化上下文）在實際的布局中有很多應(yīng)用。下面是一些BFC的常見運用：
清除浮動：當(dāng)父元素包含浮動元素時，會導(dǎo)致父元素高度塌陷，無法正確包裹浮動元素。通過在父元素上創(chuàng)建BFC，可以解決這個問題，使父元素能夠正確地包裹浮動元素。
.parent?{
??overflow:?hidden;?/*?創(chuàng)建BFC?*/
}
防止邊距重疊：在一些情況下，相鄰的塊級元素的上下邊距可能會重疊。通過在其中一個元素或兩個元素的父元素上創(chuàng)建BFC，可以防止邊距重疊。
.element?{
??overflow:?hidden;?/*?創(chuàng)建BFC?*/
}
實現(xiàn)自適應(yīng)的兩欄布局：通過將其中一個列的浮動屬性設(shè)置為"left"或"right"，并在其父元素上創(chuàng)建BFC，可以實現(xiàn)自適應(yīng)的兩欄布局。
.left-column?{
??float:?left;
}
.parent?{
??overflow:?hidden;?/*?創(chuàng)建BFC?*/
}
解決浮動元素引起的布局問題：當(dāng)浮動元素位于文檔流中，并影響其后續(xù)元素的布局時，可以將受影響的元素的父元素創(chuàng)建為BFC，以解決布局問題。
.parent?{
??overflow:?hidden;?/*?創(chuàng)建BFC?*/
}
防止文字環(huán)繞浮動元素：通過在包含文字的容器元素上創(chuàng)建BFC，可以使文字不會環(huán)繞浮動元素，而是在其下方進行布局。
.text-container?{
??overflow:?hidden;?/*?創(chuàng)建BFC?*/
}
總結(jié)
BFC在CSS布局中具有重要的作用，它可以帶來以下好處和用途：
清除浮動：通過創(chuàng)建BFC，可以解決浮動元素導(dǎo)致的父元素高度塌陷的問題，使得父元素能夠正確包裹浮動元素。
防止邊距重疊：通過創(chuàng)建BFC，可以防止相鄰塊級元素的上下邊距重疊，確保布局的可控性和一致性。
自適應(yīng)布局：通過使用BFC和浮動屬性，可以實現(xiàn)自適應(yīng)的多欄布局，其中一列可以浮動，而其他列則會自動填充剩余空間。
解決浮動元素引起的布局問題：當(dāng)浮動元素位于文檔流中并影響其后續(xù)元素的布局時，創(chuàng)建BFC可以防止這種影響，確保正確的元素排列。
防止文字環(huán)繞浮動元素：通過創(chuàng)建BFC，可以使文本不會環(huán)繞浮動元素，而是在其下方進行布局，提高頁面的可讀性和一致性。
控制元素布局：BFC提供了更好的布局控制能力，使得元素的排列、定位和尺寸更加可控和靈活。
隔離作用用：創(chuàng)建BFC可以將其內(nèi)部元素與外部元素隔離開來，避免互相影響，提高布局的可靠性和可預(yù)測性。
