剛拒絕了一個很有誘惑的公司，不是不想去，而是對現在的能力還不確定，希望能夠進一步提高自己的技能，所有想寫博客了，監督自己的學習進度·········現在還沒有開放博客，希望成熟一些后再開放吧！
進入正題啦啦啦！
一、什么是BFC(Block Formatting Content)？
IE用的是hasLayout而非IE瀏覽器用的即是BFC（塊格式化上下文）
1、BFC是W3C CSS2.1中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素之間的關系和相互作用。在創建了BFC的元素中，其子元素會一個挨着一個的放置，垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰元素的垂直距離取決於margin值，但是呢，相鄰的塊級元素的垂直邊距會折疊（collpase）（我是這么理解的：就是設置margin：10px，但是顯示是5px，不知正確否？）
2、在BFC中，每一個元素的左外邊與包含塊的左邊相接觸（對於從右到左的格式化，右外邊接觸右邊），即使存在浮動也會如此（盡管一個元素的內容區域會因為浮動而壓縮）（不是很理解這個）。除非這個元素也創建了新的BFC。
3、在CSS3中對BFC有了新的定義：http://www.w3.org/TR/css3-box/#block-level0 ，CSS3中將BFC 叫做 flow root。
二、怎么才能觸發BFC呢？只要滿足下面其中之一的要求即可
1、float不能為none； 2、overflow（不能為visibile）； 3、display:(table-cell\table-caption\inline-block)；4、position:(任何值除了static\relative)
Tips：我們有時會用overflow：hidden去清楚浮動。就是因為它可以觸發元素的塊格式化上下文(IE6,7要申明zoom:1)，這個方法確實簡單，但是相當粗暴。
三、什么是hasLayout？
這個屬性是IE特有的，與其他瀏覽器沒有一毛線的關系，霸道吧。說起IE就是痛啊！
1、Layout是IE瀏覽器渲染引擎的一個內部組成部分。在IE中，一個元素要么對自己的自身內容進行組織和計算要么就是依賴其包含塊來計算和組織內容。為了協調這兩種方式的矛盾，渲染引擎采用了'hasLayout'屬性，屬性值可以為true或者flase，當一個元素的hasLayout為true時，我們就說這個元素有一個布局（Layout），或者擁有布局，這個時候就不用依賴其包含塊了而是靠自身內容。
2、在IE中，我們可以通過'hasLayout'屬性可以判斷一個元素是否擁有Layout。如object.currentStyle.hasLayout。
3、很多IE6下的bug都是因為沒有觸發hasLayout而造成的。所有我們在解決bug時候就是去觸發元素的布局。
四、怎么觸發元素hasLayout呢？
1、有些元素因為默認就擁有布局所以就不用觸發了，如（html,body,table,th,tr,td,img,hr,input,button,select,textarea,fileldset,legend,iframe,embed,object,applet,marquee）
2、而其他元素就沒有了，沒有的話怎么觸發呢？當然是用css去觸發了，如下屬性。
display:inline-block, height(除auto以外的所有值), widht(除auto以外的所有值）, float:right或left, position:absolute, writing-mode:tb-rl; zoom:（除normal外的任何值）
IE7還有一些額外的元素，如下：請看！
1、如果父元素的子元素有浮動，父元素的高度塌陷怎么解決？那么在父元素上激活hasLayout和BFC就可以清楚浮動了，最常見的是zoom：1（IE6下），overflow：hidden（激活標准瀏覽器下的MFC）
2、浮動元素和常規元素的重疊問題
當浮動元素右邊跟隨的是常規流元素會重疊
設置常規流元素.bfc{overflow:hidden; zoom:1}激活hasLayout和BFC便可解決問題，如下圖：
