文件流(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
# 4.通過父級:after偽類
# .sup:after
Python 浮動 清浮動
浮動布局 一.display總結 css inline 1.同行顯示,就相當於純文字,當一行顯示不下,如就是乙個字顯示不下,那麼顯示不下的那乙個字就會自動換行,和純文字的區別就是有標籤整體的概念,標籤與標籤間有乙個空格的隔斷 2.支援部分css樣式,不支援寬高 行高 行高會對映到父級block標籤 ...
聖杯布局 浮動清浮
布局要求1.main模組最先載入 2.main模組寬度佔滿父容器 3.main模組浮動，left right模組居左右 複製 來個例子 先看小例子的最終效果 前為未清除浮動，後為清除浮動 基礎結構聖杯布局 content clearfix main text main left text left ...
清浮動方法
1.加高 問題 擴充套件性不好 2.父級浮動 問題 頁面中所有元素都加浮動，margin左右自動失效 floats bad 3.inline block 清浮動方法 問題 margin左右自動失效 4.空標籤清浮動 問題 ie6 最小高度 19px 解決後ie6下還有2px偏差 5.br清浮動 問題...