浮動與清除浮動、標準文檔流(重點)
什麽是標準文檔流
宏觀的將，我們的web頁面和ps等設計軟件有本質的區別，web 網頁的制作，是個“流”，從上而下 ，像 “織毛衣”。而設計軟件 ，想往哪裏畫東西，就去哪裏畫
標準文檔流下 有哪些微觀現象？
1.空白折疊現象
多個空格會被合並成一個空格顯示到瀏覽器頁面中。img標簽換行寫。會發現每張圖片之間有間隙，如果在一行內寫img標簽，就解決了這個問題，但是我們不會這樣去寫我們的html結構。這種現象稱為空白折疊現象。
2.高矮不齊，底邊對齊
文字還有圖片大小不一，都會讓我們頁面的元素出現高矮不齊的現象，但是在瀏覽器查看我們的頁面總會發現底邊對齊
3.自動換行，一行寫不滿，換行寫
如果在一行內寫文字，文字過多，那麽瀏覽器會自動換行去顯示我們的文字。
浮動
浮動是css裏面布局最多的一個屬性，也是很重要的一個屬性。
float：表示浮動的意思。它有四個值。
- none: 表示不浮動，默認
- left: 表示左浮動
- right：表示右浮動
看個栗子
<div class="box1"></div>
<div class="box2"></div>
<span>路飛學城</span>
.box1{ width: 300px; height: 300px; background-color: red; float:left; } .box2{ width: 400px; height: 400px; background-color: green; float:right; } span{ float: left; width: 100px; height: 200px; background-color: yellow; }
我們會發現，三個元素並排顯示，.box1和span因為是左浮動，緊挨在一起，這種現象貼邊。.box2盒子因為右浮動，所以緊靠著右邊。(UI很多都是模糊了用戶的雙眼，脫離了文檔標準流，其實不在文檔中了，好比是有個盒子，我給它設置了透明色，我們看不到它，但是它實際存在的。)
那麽浮動如果大家想學好，一定要知道它的四大特性
1.浮動的元素脫標
2.浮動的元素互相貼靠
3.浮動的元素由"子圍"效果
4.收縮的效果
浮動元素脫標
脫標：就是脫離了標準文檔流
看例子
<div class="box1">小紅</div> <div class="box2">小黃</div> <span>小馬哥</span> <span>小馬哥</span>
.box1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2{
width: 400px;
height: 400px;
background-color: yellow;
}
span{
background-color: green;
float: left;
width: 300px;
height: 50px;
}
效果：紅色盒子壓蓋住了黃色的盒子，一個行內的span標簽竟然能夠設置寬高了。
原因1：小紅設置了浮動，小黃沒有設置浮動，小紅脫離了標準文檔流，其實就是它不在頁面中占位置了，此時瀏覽器認為小黃是標準文檔流中的第一個盒子。所以就渲染到了頁面中的第一個位置上。這種現象，也有一種叫法，浮動元素“飄起來了”，但我不建議大家這樣叫。
原因2：所有的標簽一旦設置浮動，就能夠並排，並且都不區分行內、塊狀元素，都能夠設置寬高
浮動元素互相貼靠
看例子
html結構
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
css樣式
.box1{
width: 100px;
height: 400px;
float: left;
background-color: red;
}
.box2{
width: 150px;
height: 450px;
float: left;
background-color: yellow;
}
.box3{
width: 300px;
height: 300px;
float: left;
background-color: green;
}
效果發現：
如果父元素有足夠的空間，那麽3哥緊靠著2哥，2哥緊靠著1哥，1哥靠著邊。
如果沒有足夠的空間，那麽就會靠著1哥，如果再沒有足夠的空間靠著1哥，自己往邊靠
浮動元素字圍效果
html結構：
<div>
<img src="./images/企業1.png" >
</div>
<p>
123路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛
</p>
css樣式：
*{
padding: 0;
margin: 0;
}
div{
float: left;
}
p{
background-color: #666;
}
效果發現：所謂字圍效果，當div浮動，p不浮動，div遮蓋住了p，div的層級提高，但是p中的文字不會被遮蓋，此時就形成了字圍效果。
浮動元素緊湊效果
收縮：一個浮動元素。如果沒有設置width，那麽就自動收縮為文字的寬度（這點跟行內元素很像）
html結構：
<div>alex</div>
css樣式：
div{
float: left;
background-color: red;
}
大家一定要謹記：關於浮動，我們初期一定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一起浮動。另外，有浮動，一定要清除浮動。
為什麽要清除浮動
在頁面布局的時候，每個結構中的父元素的高度，我們一般不會設置。（為什麽？）
大家想，如果我第一版的頁面的寫完了，感覺非常爽，突然隔了一個月，老板說頁面某一塊的區域，我要加點內容，或者我覺得圖片要縮小一下。這樣的需求在工作中非常常見的。真想打他啊。那麽此時作為一個前端小白，肯定是去每個地方加內容，改圖片，然後修改父盒子的高度。那問題來了，這樣不影響開發效率嗎？答案是肯定的。
看一個效果：
html效果：
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="father2"></div>
css樣式：
*{
padding: 0;
margin: 0;
}
.father{
width: 1126px;
/*子元素浮動 父盒子一般不設置高度*/
/*出現這種問題，我們要清除浮動帶來影響*/
/*height: 300px;*/
}
.box1{
width: 200px;
height: 500px;
float: left;
background-color: red;
}
.box2{
width: 300px;
height: 200px;
float: left;
background-color: green;
}
.box3{
width: 400px;
float: left;
height: 100px;
background-color: blue;
}
.father2{
width: 1126px;
height: 600px;
background-color: purple;
}
效果發現：如果不給父盒子一個高度，那麽浮動子元素是不會填充父盒子的高度，那麽此時.father2的盒子就會跑到第一個位置上，影響頁面布局。
那麽我們知道，浮動元素確實能實現我們頁面元素並排的效果，這是它的好處，同時它還帶來了頁面布局極大的錯亂！！！所以我們要清除浮動
還好還好。我們有多種清除浮動的方法，在這裏給大家介紹四種：
- 給父盒子設置高度
- clear:both
- 偽元素清除法
- overflow：hidden
給父盒子設置高度
這個方法給大家上個代碼介紹，它的使用不靈活，一般會常用頁面中固定高度的，並且子元素並排顯示的布局。比如：導航欄
clear：both
clear：意思就是清除的意思。
有三個值：
left：當前元素左邊不允許有浮動元素
right：當前元素右邊不允許有浮動元素
both：當前元素左右兩邊不允許有浮動元素
給浮動元素的後面加一個空的div，並且該元素不浮動，然後設置clear：both。
html結構：
<div>
<ul>
<li>Python</li>
<li>web</li>
<li>linux</li>
<!-- 給浮動元素最後面加一個空的div 並且該元素不浮動 ，然後設置clear:both 清除別人對我的浮動影響-->
<!-- 內墻法 -->
<!-- 無緣無故加了div元素 結構冗余 -->
<div class="clear"></div>
</ul>
</div>
<div class="box">
</div>
css樣式
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
div{
width: 400px;
}
div ul li {
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box{
width: 200px;
height: 100px;
background-color: yellow;
}
.clear{
clear: both;
}
偽元素清除法(常用)
給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，然後設置
.clearfix:after{
/*必須要寫這三句話*/
content: ‘.‘;
clear: both;
display: block;
}
新浪首頁推薦偽元素清除法的寫法
/*
新浪首頁清除浮動偽元素方法
*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
overflow:hidden(常用)
overflow屬性規定當內容溢出元素框時發生的事情。
說明：
這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。
有五個值：
| 值 | 描述 |
|---|---|
| visible | 默認值。內容不會被修剪，會呈現在元素框之外。 |
| hidden | 內容會被修剪，並且其余內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
逐漸演變成overflow：hidden清除法。
其實它是一個BFC區域: https://blog.csdn.net/riddle1981/article/details/52126522
到此為止。關於浮動的實現並排、清除浮動的四個用法已經介紹完畢，大家一定要熟記於心。
margin塌陷問題
當時說到了盒模型，盒模型包含著margin，為什麽要在這裏說margin呢？因為元素和元素在垂直方向上margin裏面有坑。
我們來看一個例子：
html結構：
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
</div>
css樣式：
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
overflow: hidden;
border: 1px solid gray;
}
.box1{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 20px;}
.box2{
width: 400px;
height: 300px;
background-color: green;
margin-top: 50px;
}
當給兩個標準流下兄弟盒子 設置垂直方向上的margin時，那麽以較大的為準，那麽我們稱這種現象叫塌陷。我們稱為這種技巧叫“奇淫技巧”。記住這種現象，在布局垂直方向盒子的時候主要margin的用法。
當我們給兩個標準流下的兄弟盒子設置浮動之後，就不會出現margin塌陷的問題。
margin：0 auto;
div{
width: 780px;
height: 50px;
background-color: red;
/*水平居中盒子*/
margin: 0px auto;
/*水平居中文字*/
text-align: center;
}
當一個div元素設置margin：0 auto;時就會居中盒子，那我們知道margin:0 auto;表示上下外邊距離為0，左右為auto的距離，那麽auto是什麽意思呢？
設置margin-left:auto；我們發現盒子盡可能大的右邊有很大的距離，沒有什麽意義。當設置margin-right:auto；我們發現盒子盡可能大的左邊有很大的距離。當兩條語句並存的時候，我們發現盒子盡可能大的左右兩邊有很大的距離。此時我們就發現盒子居中了。
另外如何給盒子設置浮動，那麽margin:0 auto失效。
使用margin：0 auto;註意點：
1.使用margin: 0 auto;水平居中盒子必須有width，要有明確width，文字水平居中使用text-align: center;
2.只有標準流下的盒子 才能使用margin:0 auto;
當一個盒子浮動了，固定定位，絕對定位(後面會講)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
另外大家一定要知道margin屬性是描述兄弟盒子的關系，而padding描述的是父子盒子的關系
善於使用父親的padding，而不是margin
如果讓大家實現如圖的效果，應該有不少的同學做不出來。
那麽我們來看看這個案例，它的坑在哪裏？
下面這個代碼應該是大家都會去寫的代碼。
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
background-color: blue;
}
.xiongda{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 30px;
}
因為父親沒有border，那麽兒子margin-top實際上踹的是“流” 踹的是行,所以父親掉下來了，一旦給父親一個border發現就好了。
那麽問題來了，我們不可能在頁面中無緣無故的去給盒子加一個border，所以此時的解決方案只有一種。就是使用父親的padding。讓子盒子擠下來。
浮動與清除浮動、標準文檔流(重點)