標準文檔流
內(nèi)容為從左到右，從上到下來排版的支救。前面的內(nèi)容的大小會影響后面的內(nèi)容臭增，高低不齊，底邊對齊
塊級元素和行內(nèi)元素
標準文檔流講html標簽分成了塊級標簽和行內(nèi)標簽撇他。
- 塊級標簽：所有的容器級標簽都是塊級標簽茄猫。文本級標簽里的p標簽也是一個塊級標簽。例如：body,div,h系列,ul,ol,li,dl,dt,dd,table,tr,td等困肩。
- 獨占一行划纽，同行不會出現(xiàn)其他的同級標簽。
- 可以設(shè)置寬高锌畸。不設(shè)置的話勇劣，會自動繼承上級的寬
- 行內(nèi)標簽：除了p標簽之外的所有文本級標簽。例如：a,span,img,input等蹋绽。
- 行內(nèi)標簽不獨占一行芭毙，可以與其他的行內(nèi)元素并排在一行。
- 行內(nèi)元素不能設(shè)置寬高卸耘，其他內(nèi)邊距，邊框等可以正常設(shè)置粘咖。
塊級元素和行內(nèi)元素可以相互轉(zhuǎn)換
這個屬性為display：顯示模式蚣抗。
block：塊級。
inline：行內(nèi)（常用）瓮下。
inline-block：行內(nèi)塊翰铡。
三：浮動
float：浮動。分為left和right讽坏《В可以讓元素以某一方向并排排列，脫離標準文檔流路呜，既可以設(shè)置寬高又可以一行排列迷捧。
left：左浮動，從左到右依次貼左邊布局
-
right： 右浮動胀葱，從右向左依次貼右邊布局
* { margin: 0px; padding: 0px; } div { width: 50px; height: 50px; margin: 10px; background: green; float: left; }
浮動
-
當(dāng)標簽大小不一漠秋，且一行放不下時，會自動換行布局抵屿，并且去找臨近的盒子去貼邊庆锦，而不是直接去找最前邊的。
截屏2020-03-0117.55.58.png 不會有margin塌陷的問題轧葛。
-
文字圍效果
文字不像盒子背景部分一樣搂抒，不會被浮動的元素遮蓋住艇搀，文字會繞開浮動的元素進行排列。.content { width: 600px; height: auto; clear: left; } img { float: left; }
文字圍效果
浮動存在的問題
- 浮動元素不能撐開父盒子
- 浮動會影響后面的元素
清除浮動
- 給父盒子設(shè)置高度求晶。但是高度不能自適應(yīng)了中符，有局限。
- 清除浮動屬性clear
值為left誉帅，right淀散，both。顧名思義蚜锨，清除左或右档插，或者二者的影響。
clear：left亚再；但是仍然不能撐開父盒子郭膛，有局限。 - 隔墻法
在相互影響的元素之間加一道墻氛悬，阻隔開兩邊的元素则剃，這個墻添加清除屬性。- 外墻法： 在有浮動元素的父盒子之間加一道墻如捅。仍然不能解決自適應(yīng)的問題棍现。
- 內(nèi)墻法： 將清除浮動的墻放在有浮動元素的父盒子內(nèi)部的最后，只要有浮動镜遣，就在盒子內(nèi)部加一堵墻己肮。可以解決問題悲关，但是會添加很多冗余的標簽谎僻。
/*清除浮動*/
.cl {
clear: both;
}
<body>
<div class="line1">
<div class="green">1</div>
<div class="green">2</div>
<div class="green">3</div>
<div class="green">4</div>
<div class="cl"></div>
</div>
<div class="line2">
<div class="blue">1</div>
<div class="blue">2</div>
<div class="blue">3</div>
<div class="blue">4</div>
<div class="cl"></div>
</div>
<body>
浮動的影響
內(nèi)墻法清除浮動
-
overflow：hidden
盒子內(nèi)入的元素可以設(shè)置溢出模式，隱藏寓辱，自動顯示艘绍。
屬性值：hidden隱藏，auto溢出滾動
.line1 {
width: 600px;
background: red;
clear: left;
padding: 10px;
overflow: hidden;
}
.line2 {
width: 600px;
background: yellow;
clear: left;
padding: 10px;
overflow: hidden;
}
實際工作中秫筏，在大的結(jié)構(gòu)中诱鞠，通常加一個外墻來隔開，內(nèi)部則使用overflow：hidden來清除浮動
