什么是浮動(dòng)
浮動(dòng)的本質(zhì)：實(shí)現(xiàn)文字環(huán)繞效果
元素脫離文檔流不脫離文字流
脫離文檔流：假如A元素浮動(dòng)了，原本排在該元素之后的元素發(fā)現(xiàn)A元素不在這個(gè)文檔流了，就會(huì)無(wú)視它往上接到A元素前面的元素之后
不脫離文字流：文字并不會(huì)無(wú)視它，還會(huì)環(huán)繞A元素
使用position：absolute，脫離文字流，直接覆蓋
浮動(dòng)會(huì)導(dǎo)致父元素的高度塌陷
BFC
塊級(jí)格式化上下文，當(dāng)創(chuàng)建BFC之后元素就會(huì)把里面的東西視為自己的東西，包括浮動(dòng)元素，然后創(chuàng)建一個(gè)私有領(lǐng)域給包裹進(jìn)來(lái)。
創(chuàng)建BFC 的幾種方法：
- float不為none
- overflow不為visible
- display為table-cell、table-captain、inline-block
-
position不為static、relative
BFC的特性：
1.讓原本會(huì)疊加的上下外邊距疊加無(wú)效。相鄰盒子margin垂直方向會(huì)重
2.BFC不圍繞浮動(dòng)元素
清除浮動(dòng)的方法(解決父元素高度塌陷)
- clear:both
- 創(chuàng)建BFC
- 通過(guò)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽例如并設(shè)置樣式為clear:both | left | right ，其他標(biāo)簽br等亦可
<div class="parent">
<div class="child"></div>
<div style="clear: both;"></div>
</div>
優(yōu)點(diǎn)：簡(jiǎn)單
缺點(diǎn)：增添新標(biāo)簽，不符合語(yǔ)義化
<div class="parent">
<div class="child"></div>
<br clear='all'>
</div>
- 偽元素:after
由于IE6-7不支持:after，使用zoom:1觸發(fā)hasLayout。其實(shí)是通過(guò) content 在元素的后面生成了內(nèi)容為空的塊級(jí)元素
.clearfix:after {
content:"";
display:block;//通過(guò) content 在元素的后面生成了內(nèi)容為空的塊級(jí)元素
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
zoom:1;
}
優(yōu)點(diǎn)：結(jié)構(gòu)和語(yǔ)義化完全正確,代碼量居中。
缺點(diǎn)：復(fù)用方式不當(dāng)會(huì)造成代碼量增加。
.clearfix:after {
content:"";
display:table;
clear:both;
}
.clearfix {
zoom:1;
}
用display:table 是為了避免外邊距margin重疊導(dǎo)致的margin塌陷, 內(nèi)部元素默認(rèn)會(huì)成為 table-cell 單元格的形式
.clearfix應(yīng)該用于包含浮動(dòng)子元素的父元素上
float浮動(dòng)
使用浮動(dòng)將造成：
元素block塊狀化
破壞性造成的去空格化
