在css布局中分為內聯元素(display:inline)和塊狀元素(display:block)，塊狀元素缺省會佔據一行，可設定高度寬度以及邊距，而內聯元素不會也不能設定。常見的內聯元素有：a、span、input、select，常見的塊狀元素有：h1-h6，p,div，ul，table。
浮動元素是設定float為非none值的元素，這時該元素會自動被設定成塊元素，可以設定寬度、高度以及邊距。浮動元素，顧名思義，使
該元素浮動在其他元素之上，離
開了原來的文件流，直到浮動到父元素的左右邊距（上下邊距不受限制）或者左、右方遇到其他設定了float的元
素。而其附近設定的浮動元素會跟其邊距相鄰，表面上跟內聯元素似的。而非浮動元素則相對複雜一些，分以下
兩種情況：
浮動元素後邊的元素若是非浮動行內元素且因為定位產生重疊時，行內元素邊框、背景和內容都在該浮動元素「之上」顯示，浮動元素後邊的元素若是非浮動塊級元素且在定位後產生重疊時，該塊級元素邊框和背景在該浮動元素「之下」顯示，只有內容在浮動元素不在非浮動元素的部分顯示。
關於clear:both屬性
這個屬性只能用於設定塊狀元素，而對內聯元素無效果。
設定這個屬性的效果如下：
clear:left; 禁止左側出現浮動元素,如果左側存在浮動元素,則當前元素將在浮動元素下面另起一行呈現.
clear:right; 禁止右側出現浮動元素,如果右
側存在浮動元素,則右側的浮動元素將在當前元素下面另起一行呈現.
clear:both; 禁止左右兩側出現浮動元素,當前元素將排斥浮動元素獨佔一行呈現.
上面提到的行也可能是多行組成的乙個塊,不僅僅是一
個文字行的概念.
由於浮動元素是浮動在其父元素之上的，只有左右邊距受到父元素影響，因此，當乙個塊只有浮動子元素時，其上下高度可能為0（因為此時沒有子
元素能夠
撐起父元素），這時可以設定乙個空的塊元素，設定其clear：both屬性即可。如下面的例子所示：
<此時設定了第二個子元素的clear屬性為both，因此此時其效果如下：div
style
="border:2px solid red"
>
<
div
style
="float:left;width;80px;height;80px;border:1px solid blue;"
>text div
div>
<
div
style
="clear:both"
>
div>
div>
如果不設定clear屬性，則由於第二個子元素的內容為空，因此父元素無法撐起，顯示效果將是一條線，而由於第乙個子元素是浮動的，因此其顯示在父元素之外。如下所示：
HTML元素浮動布局
元素浮動布局float 1.文字環繞，水平布局 doctype html utf 8 title text css red green a,b,c.a b c style head 文字環繞 p red div green 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈...
前端 HTML 塊元素 行內元素 浮動，定位
1.9 塊狀元素和內聯元素的區別 a 塊狀元素單獨成行吧，不用其他元素一起在一行，內聯元素可以多個併排在一行 b 塊狀元素內可以有子元素，內聯元素不能包括子元素 c 塊狀元素可以設定寬高，內聯元素不能設定寬高 d 塊狀元素和內聯元素可以通過display屬性進行互相轉換 display inline...
HTML偽元素 用偽元素清除浮動流
1.偽元素 可以當做html標籤用css樣式來操作，但是沒有html結構 1 任何乙個元素都有偽元素，可以當做正常元素來使用。2 before 在標籤的邏輯之前 after 在標籤的邏輯之後 3 通過css選擇器選中偽元素，對偽元素進行修改，而不是通過css創造了偽元素。4 content設定偽元素...