元素，布局方式，BFC和清除浮动
元素：塊級元素，內聯元素，內聯塊狀元素
塊級元素：在默認情況下會獨占一塊區域
? ? ? ? ? ? ? ?相對于塊級元素的父元素來講，塊級元素占據的行默認是單獨享有的。
? ? ? ? ? ? ? ?通過設置元素的樣式為：
display:block;? ? ?可以讓元素具有塊級樣式。
? ? ? ? ? ? 塊級元素的特點是：水平拉伸，垂直包裹。
? ? ? ? ? ? 所謂水平拉伸，是相對于塊級元素的父元素來說的。
? ? ? ? ? ? 在不設置with屬性時，塊級元素的width會被水平拉伸，使得width+border+margin等于父元素的width；
? ? ? ? ? ? 所謂垂直包裹，是相對于塊級元素的子元素來說的。
? ? ? ? ? ? 在塊級元素沒有設置子元素或者子元素with+border+margin=0時，若不設置塊級元素的height屬性，則height默認為0，
? ? ? ? ? ? 若塊級元素內部有一個with+border+margin=N，則塊級元素的height=N；
? ? ? ? ? ? 總結:
?內聯元素：可以與其他元素共享同一行。
? ? ? ? ? ? 通過設置元素的樣式為：
display:inline;? ? ?可以讓元素具有內聯樣式。
? ? ? ? ? ? 內聯元素又能單獨分為兩類：替換元素和非替換元素
? ? ? ? ? ? 替換元素如：img，input。這類元素和其他元素位于同一行上，擁有內在尺寸，高度、寬度、行高以及頂和底邊距都可設置（有些是瀏覽器設置的，有些是人為提前設置的，如圖片的寬和高）。
? ? ? ? ? ? 非替換元素：內容直接包含在文檔中，甚至可以認為是有衍生功能的文檔。
? ? ? ? ? ? 總結：
內聯塊狀元素：同時具備內聯和塊狀元素的特點
? ? ? ? ? ?可以和文本和非塊級元素位于同一行上；同時元素的高度、寬度、行高以及頂和底邊距都可設置。
? ? ? ? ???通過設置元素的樣式為：
display:inline-block;?
布局方式：普通流，浮動，絕對定位
普通流（Normal Flow）：HTML默認的從左到右，自上而下的布局方式。
浮動（Floats）:浮動的框可以向左或向右浮動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣（w3c）。
a.浮動會脫離正常的文檔流，浮動元素A的浮動位置任然是相對于父元素所在的位置的，?
b.如果父元素也在浮動，浮動元素A任然是參照他的父元素進行浮動，這一點與浮動父元素不浮動時沒有區別，但是父元素會被浮動元素撐開，擁有自適應的高度。（所謂的清除浮動）
c.其他的盒子在排版時，會無視脫離文檔流的盒子，即與其相鄰的盒子會發生覆蓋重疊，但這些盒子中的文本卻會被浮動盒子排斥而環繞浮動盒子。
c.盒子的浮動會參照其父元素的width，但父元素的height不會影響浮動元素的位置，正常流中的父元素的height不會通過自適應去包裹其浮動元素，因為浮動元素已經脫離普通流。（這給排版帶來一定的困難）
絕對定位（Absolute Positioning）：絕對定位的元素會脫離普通流，并且完全和普通流中的元素脫離關系。
BFC（Block Formatting Context）：塊級格式上下文
?
?視覺格式化模型：定義了CSS中的盒模型，包括塊盒（block box），行內盒（inline box）和匿名盒（anonymous box）。
?
?BFC的概念：可以理解為隔離了的容器，其內部的元素在布局上不會對外部元素產生影響。（可以將DFC暴力的直接理解為一個單獨的html頁面）
觸發方式：
BFC的作用主要有兩個：讓容器與容器間的上下邊距發生折疊（大吃小）；可以阻止元素被浮動元素覆蓋。
通過給要清除浮動元素的父元素定義偽類:after配合zoom
?
轉載于:https://www.cnblogs.com/tisikcci/p/5718564.html
總結
以上是生活随笔為你收集整理的元素，布局方式，BFC和清除浮动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HDU 1251 统计难题 字典树
- 下一篇： 经典算法面试题目-置矩阵行列元素为0（1