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