1.
預設的就是文件流的方式
以預設的
html
元素的結構順序顯示
2.
浮動布局方式
通過設定
html
元素的float
屬性顯示
3.
定位布局方式
通過設定
html
元素的position
屬性顯示 浮動
浮動（float
）css
實現布局的一種方式，包括
div在內的任何元素都可以以浮動的方式進行顯示
浮動是將塊元素的霸道屬性（獨佔一行的取消），允許別人和它一行，其實就是這個塊從原來的文件流模式中分離出來，它後面的物件就視它不存在 值：
none
：不浮動
left
：物件向左浮動，而後面的
內容流向物件的右側
right
：物件向右浮動，而後面的內容流向物件的左側
補充：當父元素沒有指定高度並且它的子元素有浮動時，這時，這個父元素的高度不會自動增加
1常用的布局效果：例如，一行並列式，就是在一行中，顯示幾個塊元素
如果想讓多個塊顯示在同一行中，可以將這些塊都設定為浮動，並且浮動方向相同
2css
把網頁元素，分為兩類，一類是塊，一類是內聯
body,div,p,h1
3ul和li
預設情況下是塊元素，要想讓他們在一行中顯示，就要用到浮動。
4
我們在製作時，多使用不同的瀏覽器檢視你的結果，這樣，就知道各種瀏覽器的差別
5
當ie6
父元素中的子元素的高度超出了父元素，
ie6會把父元素的高度自動增加
清除浮動
就是去掉前面物件浮動對後面物件的影響
clear ：
none
：預設值，不清除浮動
left
：只清除向左的浮動
right
：只清除向右的浮動
both
：所有浮動都會清除
浮動浮動，先浮後動，浮動的物件，會先漂浮起來，離開原來的位置，後動，就是它後面的物件會向它原來的位置上動起來
12
3
當瀏覽器視窗的逐漸變小後，紅塊和綠塊本應該在同行的元素的位置發生了改變。改變了原來的位置
改變位置的截圖:
解決方法：在左右兩塊外加乙個父元素，用於控制它們的整體
總結：清除浮動方法總結
當元素有浮動屬性時，
會對其父元素或後面的元素產生影響，會出現乙個布局錯亂現象
，可以通過清除浮動的方法來解決浮動元素的影響。
這是最簡單到的方法，在浮動容器的末尾增加乙個
」clear:both」
的元素，強迫容器適應它的高度以便裝下所有的
float
元素
.class41
32/*新增乙個空div*/
3
overflow
值設定為
hidden
，使最簡單的清除浮動的方法，但如果使用的定位布局，就會很難實現
css中溢位的使用 功能
語法設定當物件的內容超過其指定高度及寬度時如何管理內容
overflow:visivle[
預設值。不剪下內容也不新增滾動條]，
auto[
在必要時物件內容才會被裁切或顯示滾動條]，
hidden[
不顯示超過物件尺寸的內容]，
scroll[
總是顯示滾動條]
方法三：利用偽物件
agter
方法：
定義乙個類，使用偽
after
，控制浮動元素的影響
網上最流行的清除浮動的**：
.clearfix:afterposition
屬性控制元素的位置
當我們要使用絕對定位時，必須要有兩個條件：
屬性:position
描述：設定物件的定位方式 值：
static
：靜態定位：頁面中的每乙個物件的預設值
absolute
：絕對定位
:將物件從文件流中分離出來，通過設定
left
，right
，top
，bottom
四個方向相對於父級物件進行絕對定位。如果不存在這樣的父物件，則依據
body
物件。
relative
：相對定位：物件不從文件流分離，通過設定
left
，right
，top
，bottom
四個方向相對於自身位置進行相對定位。
相對定位和絕對定位的區別：
絕對定位是以父元素為基準點，進行定位
,會脫離文件流。
相對定位是根據其自身為基準點，進行定位，離開原來的位置，但還佔著原來的空間。
注意：有些元素有內外邊距
補充：css控制字型樣式：
補充：向想文字在垂直方向上居中，將行高設定為元素的高度，行高=元素高度（文字的內容不能超過元素的寬度，也就是說不能換行）
HTML CSS 五種布局方式
已知布局元素的高度，寫出三欄布局，要求左欄 右欄寬度各為300px，中間自適應。一 浮動布局 charset utf 8 浮動布局title type text css wrap1 div wrap1 left wrap1 right wrap1 center style head class wr...
HTML CSS 混合布局
charset utf 8 混合布局title type text css body top main left right foot margin 0auto 的意思就是 上下邊界為0，左右根據寬度自適應！其實就是 水平居中的意思 style head class top div class ma...
html css布局技巧
一 父元素的寬高的變化子元始終素鋪滿父元素 二 子元素位於父元素正中心 三 子元素垂直居中 四 子元素水平居中 五 固定寬高比盒子，padding bottom的取值是參照width，如果width的值是百分比，那麼參照就是父元素的width值 六 文字多於容器寬度顯示省略號 overflow hi...