学习css的小伙伴肯定要学浮动这个知识点,这在布局页面有很大的帮助,在学习之前我们先要了解标准流这个知识点,标准流简单来说就是按照代码的顺序来一次执行并在页面中显示的这种现象,而给他设置浮动,就会脱离这种标准流,简称脱标,脱标的元素就可以想象成变成了云彩向上漂浮到顶端,
设置方法就是在想要设置浮动的标签上添加
float:left
我们通常都设置为左浮动,当然想设置成右浮动(right)也是完全ok的,注意脱标的元素不能去中间,浮动的元素自动改变成行内块元素,
既然说变成了云彩向上飘,如果上下有其他的元素那么就必然会造成影响,下面我们来说造成的影响
1,对上面元素的影响
(1)对块级元素不会造成影响
(2)行内元素:如果都在一侧,那么会将原有的行内元素位置占用,原有的元素会跟着最后一个浮动的元素继续排序
2,对下面元素的影响
(1)块级元素:因上面设置浮动脱离标准流,标准检测不到上面的元素导致会将下面的元素盖住(同一侧)
(2)块级元素和上面未设置浮动的元素成相邻关系(异侧)
3,如果浮动的元素在另一个盒子的内部,那么他们两个会一起移动
4,设置浮动的元素出现在父盒子的(0,0)点的位置
虽然设置浮动可以改变布局但是他也带来了一些不好的影响,下面我们就来解决这些影响,有三种方法
(1)添加一个空的div设置给其设置上
clear:both;
(2)给父级盒子加. (缺点:容易造成不自动换行,不能显示溢出的元素 )
overflow:hidden
(3)使用伪元素.
.clearfix::before .clearfix::after{
content:"";
display:blocks;
height:0;
visibility:hidden;
clear:both;
小编推荐用第一种,简单并且无其他副作用