只給出關鍵點,具體效果不做太多示範,真正的東西只有自己試了才能記住

BFC

BFC觸發:

　　1.position:absolute/fixed

　　2.float:left/right
　　3.display:inline-block
　　4.overflow:hidden/scroll

關於觸發方法還有一些table-cell之類的觸發方法,但是已經很少用

BFC特性:

　　1.觸發BFC的元素，內部元素不會影響到外部其他元素

　　2.BFC可以看到浮動元素(包括內部元素)，文本元素也能看到浮動元素

　　(提一下float , 設置了float的元素,塊級元素會忽略它,但是由上可只BFC不會忽略)

margin塌陷:

　　設置兩個結構嵌套使,父元素的margin-top和子元素的margin-top會重合取其最大值,

　　但是這個最大值是以父元素的margin-top顯示的,子元素margin為0

　　效果如下

　　html結構

　　css結構

　　效果

　　解決方法:

　　1.父元素設置border

　　2.父元素觸發bfc

　　正常效果顯示如下

　　　　　　以上

margin塌陷與BFC總結