2018-07-01
(如有错误请联系我q:1444133004,来自一个前端小白的倔强)
今天在群里看见了一个人问的问题代码和效果图如下：
代码<清除浮动样式是我给他加的，下面会有清除浮动的四种方法的详细介绍>
效果图
他当时的问题是他已经给span标签设置了margin和padding都为0的属性，但是为什么他的span还是会有外边距，而且在浏览器里面调试也是magin和padding都为0。他想要实现不通过浮动出现三个span挨在一起的效果并且无边距，因为他觉得浮动会影响后面的元素 = =，我只想说他不通过浮动是做不到他想要的那种效果的，下面有我对这个问题的分析总结和清除浮动的四种方法的见解。
个人对问题的分析知识点总结：️
1.span是行内元素，span只有margin-left和margin-right有效果，要想margin-top生效需要把span转为块级元素<display:block>才行（看那位大哥的代码，他将span设为行内块元素<display:inline-block>，所以他实现了可以排成一行显示，但是margin不起效，如果将元素设置为块级元素<display:block>他的需求又达不到，所以我建议他设置浮动<float>，然后清除浮动「不要觉得浮动不好行吗！！！个人觉得浮动<float>和定位<position>是css里最好的并且也很常用的两个属性了」）
2.清除浮动的四种方法：
我们为什么要清除浮动？就要！就要！就要！️
浮动对页面带来的影响：如果一个父盒子中有一个子盒子，并且父盒子没有设置高度，(在开发中是不建议给父盒子设置高度的，因为你根本不能知道后端传来的数据会有多少，所以你根本无法设置相应的高度，这时清除浮动就是爸爸！清除浮动后子盒子会撑开父盒子，所以不管后端传来多少数据，呵！不怕！父盒子只要清除浮动了就会根据传来的数据自己设置相应的高度！)，子盒子在父盒子中进行浮动，那么父盒子的高度依旧为0，(因为浮动的元素脱离了文档流)，如果父盒子的高度为0，下面的元素会自动补位，所以这个时候就要清除浮动。
2.1 第一种方法：额外标签法
在最后一个浮动标签的后面，新增加一个标签并给其加上clear样式，用来清除浮动
```
.clear{clear:both;}
```
注意：这种方法需要额外在页面中添加一个标签来清除浮动，有啥不好的因素这里不做解释
2.2 第二种方法：使用overflow属性来清除浮动
overflow:hidden:给父盒子添加一个overflow:hidden即可；
注意：overflow:hidden带来的影响，该属性有一个特点：离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）
3.3 第三种方法：伪元素清除浮动
给父盒子添加一个样式，一般这个样式名都起为（clearfix）<你爱起啥就啥哼，但是一定要给注释！！！>
```
.clearfix{
*zoom:1; //*zoom:1 是ie7以下的版本清除浮动的方法，加了*号后除了ie7以下的版本识别其他浏览器不识别
}
.clearfix::after{ //这里可以写成.clearfix:after，浏览器会自己给你加两个冒号::的，emmmm自己可以做的事情自己做
content: " "; //设置内容为空
overflow: hidden; //将元素隐藏
height: 0; //设置高度为0
clear: both; //清除浮动
visibility: hidden; //将元素隐藏
display: block; //将文本转换为块级元素
line-height: 0; //设置行高为0
}
```
3.4使用双伪元素清除浮动
给父盒子添加一个样式，一般这个样式名都起为（clearfix）
```
.clearfix::before, .clearfix::after {
content: ""; //设置内容为空
display: block; //将文本转换为块级元素
clear: both; //清除浮动
}
.clearfix {
*zoom: 1; //*zoom:1 是ie7以下的版本清除浮动的方法，加了*号后除了ie7以下的版本识别其他浏览器不识别
}
```
网友评论