說(shuō)到浮動(dòng)之前，先說(shuō)一下CSS中margin屬性的兩種特殊現(xiàn)象
1， 外邊距的合并現(xiàn)象：
如果兩個(gè)div上下排序，給上面一個(gè)div設(shè)置margin-bottom，給下面一個(gè)div設(shè)置margin-top，
那么兩個(gè)margin會(huì)發(fā)生合并現(xiàn)象，合并以后的值較大的那個(gè)。
對(duì)于這種現(xiàn)象一般不用處理。
2，margin塌陷現(xiàn)象：
如果一個(gè)大盒子中包含一個(gè)小盒子給小盒子設(shè)置margin-top大盒子會(huì)一起向下平移。
解決方案：
1.0給大盒子加一個(gè)邊框border屬性。
2.0給大盒子設(shè)置一個(gè)overflow屬性。
3.0使用浮動(dòng)。
補(bǔ)充：overflow的常用屬性如下：
visible |
：默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。 |
Hidden： |
內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。 |
Scroll： |
內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 |
Auto： |
如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 |
浮動(dòng)
浮動(dòng)是css中的一個(gè)重點(diǎn)，為什么要使用浮動(dòng)？
是為了解決一行中顯示多個(gè)盒子的問題。
float：left； float ：right；
浮動(dòng)有三個(gè)特點(diǎn)：
1，脫離標(biāo)準(zhǔn)流，不占位置。
2，會(huì)改變?cè)氐哪J(rèn)顯示方式display為block塊級(jí)元素。
3， 浮動(dòng)的元素只會(huì)覆蓋后邊的塊級(jí)元素，不影響前邊的塊級(jí)元素。
什么是標(biāo)準(zhǔn)流？
就是瀏覽器默認(rèn)擺放盒子的標(biāo)準(zhǔn)。
標(biāo)準(zhǔn)流的特點(diǎn)：
1，塊級(jí)元素從上到下，獨(dú)占一行。
2，行內(nèi)元素，行內(nèi)塊級(jí)元素從左到右在一行中顯示。
3，占位置。
浮動(dòng)的影響以及清除浮動(dòng)的三種辦法
浮動(dòng)對(duì)頁(yè)面的影響：
如果一個(gè)父盒子中有一個(gè)子盒子，并且父盒子沒有設(shè)置高，子盒子在父盒子中進(jìn)行了浮動(dòng)，
那么將來(lái)父盒子的高度為0.由于父盒子的高度為0，下面的元素會(huì)自動(dòng)補(bǔ)位，
所以這個(gè)時(shí)候要進(jìn)行浮動(dòng)的清除。
Clear：both
1，使用額外標(biāo)簽法：
在浮動(dòng)的盒子之下再放一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽中使用clear:both，來(lái)清除浮動(dòng)對(duì)頁(yè)面的影響。
.clearfix{
clear: both;
}
<div class="clearfix"></div>
a.內(nèi)部標(biāo)簽：會(huì)將這個(gè)浮動(dòng)盒子的父盒子高度重新?lián)伍_
b.外部標(biāo)簽：會(huì)將這個(gè)浮動(dòng)盒子的影響清除，但是不會(huì)撐開父盒子。
注意：一般情況下不會(huì)使用這一種方式來(lái)清除浮動(dòng)。
因?yàn)檫@種清除浮動(dòng)的方式會(huì)增加頁(yè)面的標(biāo)簽。
2，使用overflow屬性來(lái)清除浮動(dòng)：
先找到浮動(dòng)盒子的父元素，再在父元素中添加一個(gè)屬性，
就是清除這個(gè)父元素中的子元素浮動(dòng)對(duì)頁(yè)面的影響。
overflow: hidden;
3，使用偽元素來(lái)清除浮動(dòng)：
.clearfix:after {
content: "";//添加內(nèi)容為空
height: 0;//內(nèi)容高度為0
line-height: 0;//內(nèi)容文本的高度為0
display: block;//將文本設(shè)置為塊級(jí)元素
clear: both;//清除浮動(dòng)
visibility: hidden;//將元素隱藏
}
.clearfix {
zoom: 1;/*為了兼容ie6*/
}
visible |
：默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。 |
Hidden： |
內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。 |
Scroll： |
內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 |
Auto： |
如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 |
【 微信掃一掃 】
