在css样式中，浮动、定位和清除浮动也是非常常见的，那么我们就赶紧来认识一下吧：
浮动
在说浮动之前，您首先需要了解块级元素和行内元素的特点，总结了一下如下：
块级元素独占一行；可以自行设置宽高
行内元素在一行排列，不能设置宽高。
块级元素和行内元素可以互相转换，使用display属性。(这里不做介绍) 那么，有一个问题，在页面上有两个盒子，一个盒子靠着屏幕左侧显示另一个盒子靠着屏幕的右侧显示，该怎么做呢？
作用：解决一行中显示多个盒子的问题(并且这些盒子的位置可控。)
代码
float:left;
float:right;
特点
标准流：就是浏览默认摆放盒子的标准。
浮动的元素会脱离标准流
如果一个元素按照正常的标准流来显示，会在html中所属的位置占位，后面的元素会紧跟着它。但是浮动脱了标准流，将来在看到浮动的元素之后，不能以正常的标准流来进行判断。(在标准流中不占位置了，它是在标准流之上)。
浮动以后的元素会覆盖在标准流的元素之上。
浮动规则：浮动找浮动，不浮动找不浮动。
浮动找浮动：只有写在同一个结构下面的浮动才会浮动找浮动。
浮动显示的位置与原本不浮动之前的位置是对应的。
浮动的重点：浮动的元素只会影响下面的元素，不会影响上面的元素。
浮动的元素会改变显示方式
不管元素是行内元素还是块级元素将来在显示的时候都会在同一行中显示。浮动以后的元素可以设置宽高。
总结：元素浮动后的显示方式与行内块级元素一样。
代码
Documentdiv {
width: 200px;
height: 200px;
}
.one {
background: red;
float: left;
}
.two {
background: blue;
float: left;
}
.three {
background: pink;
float: left;
}
清除浮动
我们首先来看一下浮动对页面的影响
如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0。由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。
方式
额外标签法
方法：在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响。
内部标签：会将这个浮动盒子的父盒子高度重新撑开
外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子。
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签。
使用overflow属性清除
方法：先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响。
一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏。
使用伪元素清除浮动
clearfix:after {
content: "";//添加内容为空
height: 0;//内容高度为0
line-height: 0;//内容文本的高度为0
display: block;//将文本设置为块级元素
clear: both;//清除浮动
visibility: hidden;//将元素隐藏
}
.clearfix {
zoom: 1;/*为了兼容ie6*/
}
Document.father {
width: 500px;
/*height: 300px;*/
border: 10px solid #000;
}
.son {
width: 200px;
height: 200px;
background: red;
float: right;
}
.one {
width: 500px;
height: 300px;
border: 10px solid deeppink;
}
.clearfix:after {
content: "";
height: 0;
line-height: 0;
display: block;
clear: both;
visibility: hidden;/*将元素隐藏起来*/
/*在页面的clearfix元素后面添加了一个空的块级元素(这个元素的高为0，行高也为0，并且这个元素清除了浮动)*/
}
.clearfix {
zoom: 1;/*为了兼容ie6*/
}
伪元素
在页面上不存在的元素，但是可以通过css来添加上去。
种类： :after(在。。。之后) :before(在。。。之前)
注意：每个元素都有自己的伪元素。
定位
问题：现在在页面上有两个盒子，其中第二个盒子将第一个盒子压住了一半。
作用：解决页面上盒子与盒子之间的层叠问题。
使用： position:(位置)
取值：
static:静态的,position:static(所有的标准流中的元素都是静态定位。)
relative:相对的,position:relative(使用的时候还要配合：top,left,right,bottom来使用。)
特点：如果设置了相对定位并且设置了trbl属性，那么将来盒子会以盒子原本的位置发生偏移。
absolote:绝对的,position:absolute(使用的时候也要配合trbl属性来使用。)
特点：
如果这个元素没有父元素，那么将来trbl是相对于body来定位的
如果绝对定位的元素有父元素，但是父元素没有定位，那么这个时候trbl还是相对于body来定位的。
如果绝对定位的元素有父元素，而且父元素有定位(非static)，那么这个绝对定位的元素偏移是以自己的父元素为基础。
绝对定位之后的元素在页面不会占据位置(绝对定位以后的元素会脱离标准流)。
将来在写页面的时候用的最多的既不是绝对定位也不是相对定位，而是绝对定位与相对定位一起使用：子绝父相(子元素使用绝对定位，父元素使用相对定位)。
fixed:固定,position:absolute(使用的时候也要配合trbl属性来使用。)
特点：
不管页面有多大，trbl永远是相对于浏览器的边框来的。
固定定位的元素也脱离了标准流(不在页面上占据位置)
层级
作用：设置页面中元素的层级关系。
取值：正整数。
其他补充
如果文本与图片在同一行中，那么将来文字与图片的默认对齐方式是文字的基线对齐图片的底线。
vertical-align：设置文本与图片的对齐方式：
取值：middle:将中线对齐
overflow:溢出
取值：
hidden：会将超出容器的部分隐藏起来
scroll：给容器加上滚动条
auto：根据具体情况判断容器是否要加上滚动条
元素的隐藏：
overflow:hidden//将超出的部分裁剪掉
visibility: hidden//可以将元素隐藏，但是在页面上还保留着原来的位置。
display: none;//可以将元素隐藏，并且在页面不占据位置。
diplay:none与display:block是一对反义词。
谢谢大家，如有问题及时留言哦！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
