浮動
文檔流
文檔流为居，是指盒子按照html標(biāo)簽編寫的順序依次從上到下碌宴，從左到右排列，塊元素占一行蒙畴，行內(nèi)元素在一行之內(nèi)從左到右排列贰镣，先寫的先排列，后寫的排在后面膳凝，每個盒子都占據(jù)自己的位置碑隆。
浮動特性
1、浮動元素有左浮動(float:left)和右浮動(float:right)兩種
2蹬音、浮動的元素會向左或向右浮動上煤，碰到父元素邊界、浮動元素著淆、未浮動的元素才停下來
3劫狠、相鄰浮動的塊元素可以并在一行，超出父級寬度就換行
4永部、浮動讓行內(nèi)元素或塊元素自動轉(zhuǎn)化為行內(nèi)塊元素
5独泞、浮動元素后面沒有浮動的元素會占據(jù)浮動元素的位置，沒有浮動的元素內(nèi)的文字會避開浮動的元素苔埋，形成文字饒圖的效果
6懦砂、父元素內(nèi)整體浮動的元素?zé)o法撐開父元素，需要清除浮動
7、浮動元素之間沒有垂直margin的合并
清除浮動
父級上增加屬性overflow：hidden
在最后一個子元素的后面加一個空的div孕惜，給它樣式屬性 clear:both（不推薦）
-
使用成熟的清浮動樣式類愧薛，clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;} .clearfix:after{ clear:both;} .clearfix{zoom:1;}清除浮動的使用方法：
.con2{... overflow:hidden} 或者 <div class="con2 clearfix">
css中font的一種簡寫方式：
浮動的時候，浮動順序還是按文檔中的來衫画，文檔中先出現(xiàn)的先浮動毫炉，后出現(xiàn)的后浮動
因為浮動了，所以被轉(zhuǎn)換成了行內(nèi)塊元素削罩，自動支持寬和高
浮動的子元素瞄勾，無法撐開父級的高度；父元素要給高度弥激，給多少就高多少
這個時候需要清除浮動进陡。清除浮動有三種方式（1）在父級加overf：hidden （2）在最后一個子元素后面加一個空的div，給style樣式屬性clear：both （3）最常用的方式：
代碼奉上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style type="text/css">
.con,.con2{
width: 300px;
/*height: 300px;*/
border: 1px solid #000;
margin: 100px auto 0;
font-size: 0
}
.con a{
width: 50px;
height: 50px;
display: inline-block;
background-color: gold;
font-size: 16px;
margin: 10px;
text-align: center;
line-height: 50px;
text-decoration: none;
}
.con2 a{
width: 50px;
height: 50px;
display: inline-block;
background-color: gold;
font-size: 16px;
margin: 10px;
text-align: center;
line-height: 50px;
text-decoration: none;
float: left;
}
.con2{
/*height: 300px;*/
/*overflow: hidden;*/
}
/*.clearfix:after{
content: "";
display: table;
clear: both;
}*/
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
zoom: 1;
}
</style>
</head>
<body>
<div class="con">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
</div>
<div class="con2 clearfix">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<!-- <div style="clear: both"></div> -->
</div>
</body>
</html>
效果展示：
- 浮動的時候沒有行內(nèi)塊元素的間隙
浮動的時候趾疚，元素轉(zhuǎn)換為行內(nèi)塊元素，但是和行內(nèi)塊元素還是有區(qū)別的（1）不會因為代碼換行產(chǎn)生間距（2）有浮動的特性以蕴，往左靠或者往右靠
