文檔流(normal flow)
# BFC(Block fromatting context):
# 塊級格式化上下文,它是一個獨立的渲染區域,只有Block-level box參與,它規定了內部的Block-level Box如何布局,並且與這個區域外部毫不相幹.

# BFC規則:
# 1.內部的Box會在垂直方向,一個接一個的放置;
# 2.box自身垂直方向的位置由margin-top決定,屬於同一個相鄰Box的margin會發生重疊;
# 3.Box自身水平方向的位置由margin左或右決定(具體依據:參照BFC方位),屬於同一個BFC的兩個相鄰Box的margin會發生疊加.

# 浮動布局
# float: 浮動布局,改變BFC的參照方位
# 為什麽要使用:使用它,塊級盒就會同行顯示
# float:left | right; 左|右 浮動
# left : BFC參照方向從左向右
# right : BFC參照方向從右向左
#
# 浮動的區域有父級的width決定

# 清浮動
# 清浮動:
# 浮動問題:子集浮動了,不再撐開父級的高度,那麽父級如果擁有兄弟標簽,可能會出現布局重疊問題
# 清浮動:解決上面的問題,通過使父級獲取一個合適高度,這樣子集就不會和父級的兄弟布局發生重疊
#     clear: left|right|both
# 1.設置父級的死高度
# 2.通過兄弟設置 chear:both
# 3.設置父級overflow屬性
# .sub{
#     overflow:hidden;
# }
# 4.通過父級:after偽類
# .sup:after{
#     content:"";
#     display:block;
#     clear:both;
# }

高級布局 浮動 清浮動