1，div的設置height和width是其內容的理論大小
1,為什么說內容的理論大小，因為實際內容如果比較大就會超出來。 通過設置overflow：hidden可以隱藏超出部分。
2,但對於其兄弟標簽而言，認為他的占位大小=其理論內容大小+padding+border+margin。 如果實際內容超過其理論內容的大小，那么實際內容會和其兄弟標簽重疊。
.html <div id="d1">我是第一</div> <div id="d2"> <div id="d3">我是第三（第二的子）</div> <div id="d4">我是第四（第二的子）</div> <div id="d5">我是第五（第二的子）</div> <div id="d6">我是第六（第二的子）</div> </div> <div id="d7">我是第七個</div> .css: div { border: 5px solid red; width: 200px; height: 20px; } #d2 { width: 250px; height: 50px; border-color:blue; } #d3 { width: 300px; border-color:green; } #d7{ width:150px; border-color:orange; }
注意：
1，如果div的內容是div組合，那么實際內容的大小就是內部各個設置的div的大小的總和；
2，如果div的內容是文本，那么文本長度超過理論div的長度，文本內容會自動換行超出來。
注意：超出（擠出）的內容自動換行了，但是換行的位置占用原標簽的部分位置。
換行的位置和原標簽的border，padding，margin：
<div id="d7" style="padding:11px;margin:22px;">我是第七個我是第七個我是第七個我是第七個</div>
2,默認div的位置根據其文檔中上個兄弟標簽(如果沒有兄弟就看父標簽）的位置確定。
為什么說默認情況，特殊情況如下：
比如 float屬性；position屬性；x-index屬性。
所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
並最終窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素。
html的float特性
簡介：
1，float讓元素漂浮起來，浮動元素之間不會重疊
2，其他元素占用浮動元素原有位置
3，浮動元素如果和其他元素重疊，但將其他元素的內容擠出浮動元素范圍。
3，浮動讓div元素脫離標准流，漂浮在標准流之上
<div id="d1">我是第一</div> <div id="d2"> <div id="d3">我是第三（第二的子）</div> <div id="d4">我是第四（第二的子）</div> <div id="d5">我是第五（第二的子）</div> <div id="d6">我是第六（第二的子）666666666</div> </div> <div id="d7">我是第七個我是第七個我是第七個我是第七個</div> <div id="d8">我是第八個個</div> <div id="d9">我是第九</div> @charset "utf-8"; div { border: 5px solid red; width: 180px; height: 20px; } #d2 { width: 450px; height: 120px; border-color: blue; } #d3 { width: 500px; border-color: green; } #d7 { width: 150px; border-color: orange; } #d6{ width:250px; } #d5 { border-color: yellow; float: right; }
浮動只能左右浮動。
浮動的位置：水平方向,基准點在父元素內左右浮動;垂直方向,在非浮動兄弟元素的下方左右浮動。
對其他元素的影響：
3.1，如果浮動到空白位置，那么其他元素安排位置時就當它不存在。
將d5向右浮動到空白位置，d6就當d5不存在，占用d5的位置。
#d5 {
border-color: yellow;
float: right;
}
3.2，浮動元素浮動后的位置有其他元素，會將其他元素的內容擠開。
3.2.1，如果單個元素被重疊，元素的內容是文本，那么被重疊的文本內容會當作超出原元素的效果顯示。（即自動換行顯示）
#d5 {
border-color: yellow;
float: left;
}
3.2.2，如果多個元素被重疊，那么被擠出的內容，還是以原元素超出的效果自動換行顯示。（多個元素超出的部分會混亂顯示）
（原位置）
d2向左浮動，將d7,d8,d9的內容擠下去，並且都重疊了
（浮動后效果）
3.3，多個元素浮動
3.3.1，多個連續的元素浮動，會盡量排成一行，排不下去自動換行
全部向左浮動：
#d3,#d4 ,#d5,#d6 {
border-color: yellow;
float: left;
}
d5，d6左浮動，d4右浮動：
#d5 ,#d6 {
border-color: yellow;
float: left;
}
#d4{
height:40px;
float:right;
}
排序原則：
水平方向，如果有浮動元素，以上一個同方向浮動元素的尾部為基准；
垂直方向，如果有浮動元素，以已有浮動元素為基准。
3.3.2，非連續浮動元素，浮動原因在同一個層，仍然遵循同一方盡量排成一排。
（原位置）
d4,d6向左浮動：水平方向，d6盡量和d4排成一行（並非嚴格一條直線）
#d4 ,#d6 {
border-color: yellow;
float: left;
}
總結浮動：
1，簡單來說，浮動讓原本垂直排序的元素，浮動元素與浮動元素盡量水平排序。
2，浮動讓被被重疊元素的內容擠開，
水平方向在元素范圍內擠開，
垂直方向向下擠，如果元素范圍不夠大，會擠出到原本元素范圍的下方，產生環繞效果
4，清除浮動效果
clear : none | left | right | both
取值：
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
理解不允許哪邊有浮動對象：
ps:並不是說哪邊（哪個方向）的元素不浮動，而是通過改變自身位置（一般下移），讓新位置那個方向沒有浮動元素了
4.1，不允許左邊有浮動對象
4.1.1，例子一
d1,d2都左浮動效果：
想要div2到div1的下方，那么通過設置div2的樣式：clear：left，那么之后的效果：
4.1.1，例子二
d4,d5,d6左浮動如下效果：
設置d5清除左邊浮動對象后效果：
#d5{
clear:left;
}
html的position特性
<div id="parent"> <div id="sub1">sub1</div> <div id="sub2">sub2</div> </div>
5，position的四個屬性值：
1.relative
2.absolute
3.fixed
4.static
將根據top，right，bottom，left的值移動
5.1，relative
1，按照它理應所在的位置進行偏移，relative的“相對的”意思也正體現於此。
2，保留元素原有位置，其他元素位置保持不變
5.2，absolute
簡介：
1，absolute讓元素漂浮起來，其他元素占用其原來位置
2，absolute以其父元素有position屬性的元素為定位，
如果沒有該父元素，以瀏覽器窗口進行定位（這時候同等fixed效果)
詳解：
position屬性設為absolute后，不是按照瀏覽器窗口來進行定位的，實際上，這是fixed屬性的特點。
當sub1的position設置為absolute后，其到底以誰為對象進行偏移呢？這里分為兩種情況：
（1）當sub1的父對象(或曾祖父，只要是父級對象)parent也設置了position屬性，
且position的屬性值為absolute或者relative時，
也就是說，不是默認值的情況，此時sub1按照這個parent來進行定位。
注意，到底以parent的哪個定位點來進行定位呢？
如果parent設定了margin，border，padding等屬性，
那么這個定位點將忽略padding，將會從padding開始的地方(即只從padding的左上角開始)進行定位，
也就是忽略padding，當然並不會忽略margin和border。
接下來的問題是，sub2的位置到哪里去了呢？
由於當position設置為absolute后，會導致sub1溢出正常的文檔流，就像它不屬於 parent一樣，它漂浮了起來，
此時sub2將獲得sub1的位置，它的文檔流不再基於 sub1，而是直接從parent開始。
（2）如果sub1不存在一個有着position屬性的父對象，那么那就會以body為定位對象，按照瀏覽器的窗口進行定位
5.3，fixed
fixed是特殊的absolute，即fixed總是以body為定位對象的，
按照瀏覽器的窗口進行定位,即使拖動滾動條，他的位置也是不會改變的。
5.4，static
position的默認值，一般不設置position屬性時，會按照正常的文檔流進行排列。
總結position的屬性特性：
relative,absolute，fixed特性：
相同點：
都浮動
不同點：
relative，以自身為移動坐標原點，保留原來位置，其他元素位置不變
absolute，以有position屬性的父元素為移動坐標原點，其他元素占用其原位置
fixed，以瀏覽器為移動坐標原點，其他同absolute。
position和float的區別：
不同點：
float:浮動元素之間不重疊
相同點：
absolute/fixed和float原本位置被其他元素占用，但float會將重疊元素的內容擠開。