張鑫旭的css深入理解之float浮動學習筆記float為產生文字環繞效果而生
包裹：即產生乙個bfc
破壞：使父容器塌陷，元素脫離文件流，產生inline boxes環繞
方式一：使用clear，類似於產生乙個連線索道，使前文和後文關聯，會產生margin重疊效果。
方式二：父容器bfc或者haslayout(ie6/ie7) - 封閉容器，不會產生margin重疊
.clearfix:after
.clearfix
去空格化，空格符成為環繞文字
文字環繞效果
左中右效果
單側固定
dom與顯示位置匹配的單側固定
第一種實現方式，保證向右浮動的元素寫在前（先布局），內容區設定margin-right
第二種實現方式，為了使dom和現實順序一致，對內容區加乙個向左浮動的盒子，沒有指定寬度的盒子利用外邊距保留剩餘空間，實現寬度拉伸。使用負margin把左浮動的頭像區移動到同行。
兩側自適應
使用table-cell產生乙個bfc，去除掉浮動的影響
浮動起源於實現文字環繞效果。
為了實現文字環繞效果，規範規定的措施是使父容器塌陷，元素脫離文件流浮動，元素周圍的內容轉換為inline boxes圍繞元素排列。
從浮動的起因和浮動的實現後果來看，浮動不適合用於大範圍的布局，更適合利用其特性實現一些小範圍的流體布局效果。
學習筆記 CSS深入理解之margin
張鑫旭的css深入理解之margin學習筆記前提 只應用於block元素 不考慮writing mode的情況下，只發生在垂直方向 場景 兄弟元素發生重疊 父元素和第乙個 最後乙個子元素發生重疊 margin bottom重疊 最後乙個子元素設定margin bottom相對于父元素設定margin...
CSS深入理解學習筆記之relative
1 relative和absolute的相煎關係 限制作用 限制left top right bottom定位 限制z index層級 限制在overflow下的囂張氣焰。relative和fixed限制作用 限制z index層級。2 relative和定位 特性 相對自行進行定位 無侵入，不影響...
CSS深入理解學習筆記之relative
1 relative和absolute的相煎關係 限制作用 限制left top right bottom定位 限制z index層級 限制在overflow下的囂張氣焰。relative和fixed限制作用 限制z index層級。2 relative和定位 特性 相對自行進行定位 無侵入，不影響...