關於BFC布局的那些事

它是block formatting context（塊級格式化上下文）的簡稱。

formatting context是指頁面中的一塊渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。

最常見的formatting cocntext 有block formatting context（簡稱bfc）和inline formatting (簡稱ifc).

bfc是指乙個獨立的塊級渲染區域，只有block-level box參與，該區域擁有一套渲染規則來約束塊級盒子的布局，且與區域外部無關。

bfc就是一種布局方式，可以理解為乙個作用範圍，即在乙個bfc裡的布局與其之外的布局不相關或者說不相互影響。

使用一定的css宣告可以生成bfc，瀏覽器對生成的bfc有一系列的渲染規則，利用這些渲染規則我們可以達到一定的布局效果，為了達到特定的布局效果我們讓元素生成bfc。

當乙個html元素滿足下面條件的任何一點，都可以生成block formatting context.

overflow : scroll（可能會顯示不必要的滾動條）

overflow : hidden（將會剪掉溢位的元素，不需要給bfc元素設定寬度）

display : flex

float : left（將會把元素置於它的左邊，其他元素環繞著它）

display : table-cell(必須給bfc元素設定無限大的寬度)

body

.aside
.main

在不加overflow:hidden;之前的效果：

因為根據bfc布局規則第三條可知道：

每個元素的margin box的左邊，與包含塊border box的左邊相接處（對於從左到右的格式化，否則相反）。雖然存在浮動的元素aside，但main的左邊依然會與包含塊的左邊相接處。

.parent

.child

原因是：計算bfc的高度時，浮動元素也參與計算

改變的方法是：為達到清除內部浮動，我們可以觸發parent生成bfc，那麼parent在計算高度時，parent內部的浮動元素child也會參與計算。

.parent

3、放置垂直margin重疊

p

haha

hehe

解決辦法：

p

.ddd

haha

hehe

原因就是：bfc布局規則的第二條;

box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊。

現象：兩個p之間的距離為100px，傳送了margin重疊。

解決方案：我們可以在p外面包裹一層容器，並觸發該容器生成乙個bfc，那麼兩個p便不屬於同乙個bfc，就不會發生margin重疊。

在這裡總結了一下，就是，如果一旦形成bfc，那麼這個bfc就是乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。

關於開始的那些事

人總是有惰性的，當然我自己深有體會。一直有個想法想寫寫自己的blog，但隨時間的推移，很久都沒付出行動。最近工作專案開始不那麼忙了，維護乙份自己的blog的想法愈發強烈了。想把自己的一些想法，或者看到的一些有用的東西給大家分享，也給自己留下成長的痕跡。我從小喜歡看書，各種各樣的書屬於不求甚解的狀態。...

關於coredump的那些事

今天在網上搜了一些有關coredump的知識，簡單記一下，以防忘記 core dump檔名的模式儲存在 proc sys kernel core pattern中，預設是core 主要是今天比較鬱悶，要除錯程式crash，就用ulimit c unlimited設定了一下core檔案的大小，但是測試...

關於STL 的那些事

今晚參加訓練。樹狀陣列的練習，傻乎乎的用stl做了一晚，雖然題沒做出來，不過對stl的查詢有了更深一層的理解。關於stl。輸入輸出 vector push back pop back stack push pop queue push pop 頭 front 尾 back priority queu...