在網(wǎng)頁開發(fā)過程中，為了讓塊元素能在統(tǒng)一行上面顯示澜驮，可以使用inline-block進(jìn)行布局陷揪。還有沒有其他的方式呢？我們今天學(xué)習(xí)浮動也可以達(dá)到這種效果杂穷。
float/文檔流：
float:left | right | none | inherit;
文檔流：是文檔中可顯示對象在排列時所占用的位置悍缠。
浮動：使元素脫離文檔流，按照指定方向發(fā)生移動耐量，遇到父級邊界或者相鄰的浮動元素停了下來飞蚓。
clear:left | right | both | none | inherit; # 元素的某個方向上不能有浮動元素
clear:both; # 在左右兩側(cè)均不允許浮動元素
案例：
div {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
浮動也能像inline-block一樣在同一行顯示，并且廊蜒，沒有inline-block的一個問題趴拧，就是換行符會被轉(zhuǎn)換為間隙。
如果向右浮動的話山叮，是代碼中第一個div最先浮動到最右邊著榴，然后是第二個div浮動到最右的第二個。
浮動（float）的特征：
1.多個塊可以在一排顯示
2.內(nèi)聯(lián)元素支持寬高
3.默認(rèn)內(nèi)容撐開寬度
4.脫離文檔流
5.提升層級半層
1聘芜，2兄渺，3三條和inline-block一致。
清除浮動的方法
1.父級加高度（問題：擴(kuò)展性不好）
2.父級也加浮動（問題：頁面中所有的元素都加浮動汰现，margin左右自動失效）
3.inline-block清除浮動的方法（問題：margin左右auto失效）
4.空標(biāo)簽清除浮動（問題：IE6最小高度19px挂谍。解決后IE6下還有2px偏差）
5.<br clear="all">清除浮動（問題：不符合工作中，結(jié)構(gòu)瞎饲，樣式口叙，行為，三者分離的要求嗅战。也就是說這樣的話樣式在結(jié)構(gòu)中了）
6.after偽類清除浮動（現(xiàn)在主流方式）
7.overflow：hidden 清除浮動（問題：需要配合寬度或者zoom 兼容ie6，ie7）
overflow：scroll | auto | hidden 疟呐， overflow：hidden；溢出隱藏（裁刀Ｂ撤搿）
空標(biāo)簽清除浮動方式：
.clearfix {
clear: both;
}
...
<div class="box">
<div class="item">
</div>
<div class="clearfix"></div>
</div>
after偽類清除浮動：
.clearfix:after{ # 注意：偽類的冒號后面不能有空格
content: "";
display: block;
clear: both;
}
.box {
border: 1px solid red;
}
.item {
width: 200px;
height: 200px;
background-color: #222222;
float: left;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="item"></div>
</div>
