likes
comments
collection
share

你还在用CSS旧时代布局的王者:浮动float 吗?

作者站长头像
站长
· 阅读数 14

写在前面

随着flex、grid等布局的兼容性越来越好,float几乎已经在大众的视野消失了,曾经默认的小妖精终究成为了时代的眼泪。

作为前端开发者,你经历过float的时代吗?还在用float吗?

一、什么是浮动?

首先浮动是CSS中的一个属性,所有主流浏览器都支持float(包括IE),其次它的作用是让元素脱离文档流,块元素水平排列,为什么特指块元素呢?因为内联元素本来就是水平排列的。

二、浮动的属性值:

  • left : 元素左浮动
  • right :元素右浮动
  • inherit : 继承父类的float属性值
  • none : 不浮动(默认值)

!注意:任何的版本的 Internet Explorer 都不支持属性值 "inherit"。 是不支持噢~~~

三、浮动的用法:

实例准备,我们将在下面这段代码进行浮动的演示:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>浮动</title>
        <style> 
            div{ height: 100px; width: 100px; } 
            .box1{ background: red; } 
            .box2{ background: green; } 
            .box3{ background: blue; }
         </style> 
      </head>

      <body>
          <div class="box1"></div>
          <div class="box2"></div>
          <div class="box3"></div>
       </body>
  </html>

运行效果图:

你还在用CSS旧时代布局的王者:浮动float 吗?

分析:页面中有三个div,宽高相等,颜色不一样;div为块级元素,所有默认占据一整行,现在我们要通过float使得三个div位于同一行。

1、float:left (左浮动)

div{ height: 100px; width: 100px; float: left; }

我们给所有的div都添加上了float:left,达到了所有div位于同一行的效果,同理我们可以使用float:right使得元素位于同一行,但是靠右排列

你还在用CSS旧时代布局的王者:浮动float 吗?

2、float:right (右浮动)

div{ height: 100px; width: 100px; float: right; }

使用右浮动后我们观察一下div的顺序,可以发现: 根据div的先后顺序,左浮动时,div从左到右排列;右浮动时,div从右到左排列

你还在用CSS旧时代布局的王者:浮动float 吗?

因为左浮动和右浮动元素排列顺序不一样,所有有时候我们需要特别注意一下:比如网页导航栏

<!DOCTYPE html>
<html lang="en">
    <head> <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>导航</title>
        <style> 
            ul li{ float: left; list-style: none; margin: 0 20px; }
        </style>
    </head>
    <body>
        <ul>
            <li>首页</li>
            <li>资讯</li>
            <li>产品中心</li>
            <li>关于我们</li>
            <li>反馈</li>
        </ul>
    </body>
 </html>

我们通常使用ul li来制作导航栏,那么想要使得li水平排列,我们为每个li添加了浮动,效果如下:

你还在用CSS旧时代布局的王者:浮动float 吗?

但是我们发现,一般导航栏都是左边放logo,右边放导航的,但是这里我们不能直接使用右浮动,因为这样导航的顺序就变成不是我们想要的了

你还在用CSS旧时代布局的王者:浮动float 吗?

像这个我们可以这样来实现:

html,body{ margin: 0 100px; padding: 0; }
.logo{ height: 100px; width: 200px; background: red; float: left; }
ul{ line-height: 100px; float: right; }
ul li{ float: left; list-style: none; margin: 0 20px; }
<body>
    <div class="logo"></div>
    <ul>
        <li>首页</li>
        <li>资讯</li>
        <li>产品中心</li>
        <li>关于我们</li>
        <li>反馈</li>
    </ul>
</body>

分析:我们让li在ul中仍然是左浮动,保证导航栏的顺序;然后让ul整体右浮动,而logo左浮动,这样就实现了简单的导航栏(当然,这是简单的实例,真正的导航栏还需要进很多步美化)

运行效果图:

你还在用CSS旧时代布局的王者:浮动float 吗?

3、float : none

这个是浮动的默认值,即为不浮动,用得比较少,一般在你需要覆盖别人的样式时可能会用到。

4、float:inherit

这个更少用,因为所有IE都不支持这个属性值,基本是不能使用的; 不过我没有测试过,是W3C说的~

你还在用CSS旧时代布局的王者:浮动float 吗?

四、浮动带来的后果:

浮动除了让块元素水平排列之后,还有造成我们元素的一些变化,我们也要清除:

1、浮动改变了块元素的宽度

在没有添加浮动的时候,每个div都占据一整行,如果没有指定div的宽度,div的宽度将会占满一整行

你还在用CSS旧时代布局的王者:浮动float 吗?

那在没有指定宽度的情况下,添加浮动会怎么样呢? 结果就是宽度为0了

我们可以在div中填充一些文字,再看效果:

<div class="box1">111</div>
<div class="box2">222</div>
<div class="box3">333</div>

你还在用CSS旧时代布局的王者:浮动float 吗?

结论:当元素添加浮动属性后,宽高如果不指定,则为内容撑开的宽高。

2、脱离文档流

这是个很重要的知识点

脱离文档流可以理解为元素进行了z轴的位移,网页是个立体结构,除了横竖方 向的xy轴外,还存在面向我们的z轴,浮动元素在z轴上移一层,那么原来所在的层级就空了出来,所以排列在后面的元素会占据浮动元素的前面,被浮动元素遮挡。

可以简单看一下案例:

div{ height: 100px; width: 100px; color: #fff; }
.box1{ background: red; float: left; }
.box2{ height: 200px; width: 200px; background: green; }
.box3{ background: blue; }

首先我们只给div1添加浮动,另外两个不添加;为了展示效果,给div2增加了宽高,我们可以看到这个效果:

你还在用CSS旧时代布局的王者:浮动float 吗?

这个例子可以很清晰的理解脱离文档流的意思,div1脱离了文档流,则不占据HTML中的位置了,div2补充到div1的位置,但是div1仍看得见,所以div1把div2的一部分遮挡住了。

注意:浮动元素只能遮挡元素,而不会遮挡文本,如div2所示

3、内联元素添加浮动后,拥有块级元素的特性

块级元素添加了浮动后,有了display: inline-block;的特性,比如:不占据一行、宽高根据内容变化、可以定义宽高等

而内联元素同理,也有了display: inline-block;的特性,比如可以定义宽高:

<span>111</span>
<span>222</span>
<span>333</span>
span{ height: 100px; width: 300px; margin: 0 10px; }

现在页面中有一个内联span便签,在不添加浮动的时候,定义宽高无效,如下:

你还在用CSS旧时代布局的王者:浮动float 吗?

而添加了浮动之后,span的宽高生效了

span{ height: 100px; width: 300px; margin: 0 10px; float:left; }

你还在用CSS旧时代布局的王者:浮动float 吗?

值得一提的是:元素除了浮动外,并没有添加display: inline-block; 也就是说,这种特性是float自带的,而不是通过修改了元素样式得来的。

你还在用CSS旧时代布局的王者:浮动float 吗?

4、浮动元素换行时只参考前一个元素的位置

浮动元素在父容器宽度不够的时候,进行换行显示,而换行后的Y轴位置,参考换行元素的前一个。

你还在用CSS旧时代布局的王者:浮动float 吗?

div{ width:30%; float:left; }
.box1{ background: red; height: 500px; }
.box2{ background: green; height: 100px; }
.box3{ background: yellow; height: 200px; }
.box4{ background: blue; height:300px; }
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

可以看到,蓝色盒子元素进行了换行显示,它所处在的Y轴方向是参照前一个,也就是div3的高度的,而在X轴上,仍存在浮动元素,所以蓝色盒子在红色盒子的右边出现。

五、清除浮动

清除浮动(clear)也是一个CSS属性,用作清除浮动。

注意:初学者容易认为清除浮动是清除自身的浮动,而错误的使用了clear属性,比如:

.div1{ height: 100px; width: 100px; background: red; float: left; clear: both; } 
.div2{ height: 200px; width: 200px; background: green; }

这种用法和理解是错误的(给div设置float和clear),得到的结果仍是浮动:

你还在用CSS旧时代布局的王者:浮动float 吗?

清除浮动应该理解为清除该元素周围的浮动,而不是自身浮动,如果想清除div1浮动不影响div2,那么clear应该添加给div2

.div1{ height: 100px; width: 100px; background: red; float: leftl; }
.div2{ height: 200px; width: 200px; background: green; clear: both; }

表示div2周围不能存在浮动的元素,所以div2不会和div1并列。

注意:清除浮动只是让该元素不和浮动元素一起排列,但是它不会影响div1浮动,我们可以检查一下页面:

你还在用CSS旧时代布局的王者:浮动float 吗?

div2不浮动,默认占满一整行,div1浮动了,不再占满整行,尽管div2设置清除浮动,但不会影响div1浮动。

除了清除浮动外,还可以通过下面这种方法来让浮动元素占据高度,不影响后续元素的排列:

.f{ overflow: auto; } 
.box1,.box2{ width: 200px; height: 300px; float:left; } 
.box1{ background: red; } 
.box2{ background: yellow; } 
.box3{ width: 800px; height: 400px; background: green; }
<div class="f"> 
    <div class="box1"></div>
    <div class="box2"></div>
</div>

<div class="box3"></div>

给浮动元素添加外部容器,并给外部设置样式overflow:auto即可,父元素会计算浮动元素的高度并赋值给自身。