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