2018-07-01
(如有錯誤請聯(lián)系我q:1444133004,來自一個前端小白的倔強)
今天在群里看見了一個人問的問題代碼和效果圖如下：
他當時的問題是他已經(jīng)給span標簽設(shè)置了margin和padding都為0的屬性雷猪，但是為什么他的span還是會有外邊距，而且在瀏覽器里面調(diào)試也是magin和padding都為0窄潭。他想要實現(xiàn)不通過浮動出現(xiàn)三個span挨在一起的效果并且無邊距，因為他覺得浮動會影響后面的元素 = =酵颁，我只想說他不通過浮動是做不到他想要的那種效果的嫉你，下面有我對這個問題的分析總結(jié)和清除浮動的四種方法的見解。
個人對問題的分析知識點總結(jié)：?
1.span是行內(nèi)元素躏惋，span只有margin-left和margin-right有效果幽污，要想margin-top生效需要把span轉(zhuǎn)為塊級元素<display:block>才行（看那位大哥的代碼，他將span設(shè)為行內(nèi)塊元素<display:inline-block>簿姨，所以他實現(xiàn)了可以排成一行顯示距误，但是margin不起效，如果將元素設(shè)置為塊級元素<display:block>他的需求又達不到扁位，所以我建議他設(shè)置浮動<float>准潭，然后清除浮動「不要覺得浮動不好行嗎！Ｓ虺稹刑然！個人覺得浮動<float>和定位<position>是css里最好的并且也很常用的兩個屬性了」）
2.清除浮動的四種方法：
我們?yōu)槭裁匆宄樱烤鸵疚瘢【鸵寐樱【鸵?
浮動對頁面帶來的影響：如果一個父盒子中有一個子盒子怔软，并且父盒子沒有設(shè)置高度，(在開發(fā)中是不建議給父盒子設(shè)置高度的择镇，因為你根本不能知道后端傳來的數(shù)據(jù)會有多少挡逼，所以你根本無法設(shè)置相應(yīng)的高度，這時清除浮動就是爸爸腻豌！清除浮動后子盒子會撐開父盒子家坎，所以不管后端傳來多少數(shù)據(jù)，呵饲梭！不怕乘盖！父盒子只要清除浮動了就會根據(jù)傳來的數(shù)據(jù)自己設(shè)置相應(yīng)的高度！)憔涉，子盒子在父盒子中進行浮動订框，那么父盒子的高度依舊為0，(因為浮動的元素脫離了文檔流)兜叨，如果父盒子的高度為0穿扳，下面的元素會自動補位，所以這個時候就要清除浮動国旷。
2.1 第一種方法：額外標簽法
在最后一個浮動標簽的后面矛物，新增加一個標簽并給其加上clear樣式，用來清除浮動
```
.clear{clear:both;}
```
注意：這種方法需要額外在頁面中添加一個標簽來清除浮動跪但，有啥不好的因素這里不做解釋
2.2 第二種方法：使用overflow屬性來清除浮動
overflow:hidden:給父盒子添加一個overflow:hidden即可履羞；
注意：overflow:hidden帶來的影響，該屬性有一個特點：離開了這個元素所在的區(qū)域以后會被隱藏（overflow:hidden會將超出的部分隱藏起來）
3.3 第三種方法：偽元素清除浮動
給父盒子添加一個樣式屡久，一般這個樣式名都起為（clearfix）<你愛起啥就啥哼忆首，但是一定要給注釋！１换贰糙及！>
```
.clearfix{
? ? *zoom:1;? ? //*zoom:1 是ie7以下的版本清除浮動的方法，加了*號后除了ie7以下的版本識別其他瀏覽器不識別
}
.clearfix::after{? ? //這里可以寫成.clearfix:after筛欢，瀏覽器會自己給你加兩個冒號::的浸锨，emmmm自己可以做的事情自己做
? ? content: " ";? ? //設(shè)置內(nèi)容為空
? ? overflow: hidden;? ? //將元素隱藏
? ? height: 0;? ? //設(shè)置高度為0
? ? clear: both;? ? //清除浮動
? ? visibility: hidden;? ? //將元素隱藏
? ? display: block;? ? //將文本轉(zhuǎn)換為塊級元素
? ? line-height: 0;? ? //設(shè)置行高為0
}
```
3.4使用雙偽元素清除浮動
給父盒子添加一個樣式，一般這個樣式名都起為（clearfix）
```
.clearfix::before, .clearfix::after {
? ? content: "";? ? //設(shè)置內(nèi)容為空
? ? display: block;? ? //將文本轉(zhuǎn)換為塊級元素
? ? clear: both;? ? //清除浮動
}
.clearfix {
? ? *zoom: 1;? ? //*zoom:1 是ie7以下的版本清除浮動的方法版姑，加了*號后除了ie7以下的版本識別其他瀏覽器不識別
}
```
