一、摘要：
今天在寫一個頁面，對css中的BFC（塊級格式化范圍）有了一點體會，今天把遇到的問題和解決方案總結下來，額外還總結一下強大的負外邊距的使用心得。
二、總結：
主體部分整體居中顯示，主體部分看上去像是三列，實質上只有一列，兩邊的內容都是放在中間的文本里面，這里就是用了強大的負外邊距達到的效果。
html結構：
1.關於負外邊距：
因為要保證兩邊的容器和中間的容器按要求對齊，所以把它們都放在中間的容器里面，然后再浮動，再設置負外邊距達到想要的效果：
左邊內容顯示的css代碼：
先讓它左浮動，然后再讓其向左移動一定的距離；因為只是想讓容器向左移一定的距離，采用負外邊距，只要知道當前要移動的容器的寬度，一般就很明確的知道了要移動的距離；特別是當我們不能很直觀的知道當前容器與最外層的容器的外邊距是多少的時候，采用負外邊距可以避免復雜的計算。
右邊內容顯示的css代碼：
2.關於BFC：
目前資料參照的是一位博主總結的關於BFC的文章：關於Block Formatting Context－－BFC和IE的hasLayout
我遇到的問題：如何讓紅框中的內容在容器中居中顯示（其實也算是如何讓div居中的問題，這里關鍵問題是要居中的div外面還有一個div）：
采用position的方式來實現布局，先左右居中：
效果：
加一段css代碼，再讓它垂直方向也居中：
效果：
采用position定位這個容器原則上是，想讓其先在垂直方向偏移父容器的50%，然后再向上移動自己寬度的一般達到居中的效果。
然而在這里子元素的布局完全是影響到了父容器的布局，並不是我們預期達到的效果。
要想讓子元素的布局不影響父容器的布局，就需要讓子元素和父元素處在不同的環境中。在普通流中的 Box(每一個元素都是一個盒子) 屬於一種 formatting context(格式化上下文) ，如果將元素設置成block formatting context(塊級格式化上下文)就讓元素處在了不同的環境中，BFC它是一個獨立容器，這個容器里box的布局，和容器外的毫不相干。
如何將元素設置成BFC容器：
我這里將父容器設置了絕對布局，讓其成為BFC的容器，從而布局不受到子元素的影響：
css代碼：
效果：
補充：
主要是子元素中的margin-top這個屬性值影響到了父容器的布局