一、什么是浮动?
按照我的理解:浮动是CSS中让块元素水平排列的属性。
首先浮动是CSS中的一个属性,所有主流浏览器都支持float(包括IE),其次它的作用是让块元素水平排列,为什么特指块元素呢?因为内联元素本来就是水平排列的
二、浮动的属性值:
1、left : 元素左浮动
2、right :元素右浮动
3、inherit : 继承父类的float属性值
4、none : 不浮动(默认值)
!注意:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “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>
运行效果图:
效果分析:
页面中有三个div,宽高相等,颜色不一样;div为块级元素,所有默认占据一整行,现在我们要通过float使得三个div位于同一行。
1、float:left (左浮动)
div{
height: 100px;
width: 100px;
float: left;
}
我们给所有的div都添加上了float:left,达到了所有div位于同一行的效果,同理我们可以使用float:right使得元素位于同一行,但是靠右排列
2、float:right (右浮动)
div{
height: 100px;
width: 100px;
float: right;
}
使用右浮动后我们观察一下div的顺序,可以发现:
根据div的先后顺序,左浮动时,div从左到右排列;右浮动时,div从右到左排列
因为左浮动和右浮动元素排列顺序不一样,所有有时候我们需要特别注意一下:比如网页导航栏
<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添加了浮动,效果如下:
但是我们发现,一般导航栏都是左边放logo,右边放导航的,但是这里我们不能直接使用右浮动,因为这样导航的顺序就变成不是我们想要的了
要实现常见导航栏的熊爱国,我们可以这样来实现:
<!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>
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;
}
</style>
</head>
<body>
<div class="logo"></div>
<ul>
<li>首页</li>
<li>资讯</li>
<li>产品中心</li>
<li>关于我们</li>
<li>反馈</li>
</ul>
</body>
</html>
分析:
我们让li在ul中仍然是左浮动,保证导航栏的顺序;
然后让ul整体右浮动,而logo左浮动,这样就实现了简单的导航栏、
(当然,这是简单的实例,真正的导航栏还需要进很多步美化)
运行效果图:
3、float : none
这个是浮动的默认值,即为不浮动,用得比较少,一般在你需要覆盖别人的样式时可能会用到。
4、float:inherit
这个更少用,因为所有IE都不支持这个属性值,基本是不能使用的;
不过我没有测试过,是W3C说的~
四、浮动带来的后果:
浮动除了让块元素水平排列之后,还有造成我们元素的一些变化,我们也要清楚地知道这些变化:
1、浮动改变了元素的宽度
在没有添加浮动的时候,如果没有指定div的宽度,div的宽度将会占满一整行
那么如果没有指定宽度的情况下,添加浮动会怎么样呢?
结果就是浮动的div宽度为0了
我们可以在div中填充一些文字,然后为div添加浮动
<div class="box1">111</div>
<div class="box2">222</div>
<div class="box3">333</div>
我们再看效果:
结论:当元素天添加浮动属性后,宽高如果不指定,则为内容撑开的宽高。
2、脱离文档流
这是个很重要的知识点!!
脱离文档流这个概念我也不知道怎么解释,大概意思就是这个元素已经不是这个HTML中的一部分了,或者可以理解为不占据HTML中的位置了。
可以简单看一下案例:
<style>
div{
height: 100px;
width: 100px;
color: #fff;
}
.box1{
background: red;
float: left;
}
.box2{
height: 200px;
width: 200px;
background: green;
}
.box3{
background: blue;
}
</style>
首先我们只给div1添加浮动,另外两个不添加;
为了展示效果,给div2增加了宽高,我们可以看到这个效果:
这个例子可以很清晰的理解脱离文档流的意思:
div1脱离了文档流,则不占据HTML中的位置了,div2补充到div1的位置,但是div1仍看得见,所以div1把div2的一部分遮挡住了。
更气的是:div2的位置已经不受div1的影响了,但是div2的内容(222)还是会受到div1的影响。
为了解决float带来的位置问题,我们可以运用clear属性来清除浮动(第五节讲到)。
3、内联元素添加浮动后,拥有块级元素的特性
块级元素添加了浮动后,有了 display: inline-block ; 的特性,比如:不占据一行、宽高根据内容变化、可以定义宽高等。
而内联元素同理,也有了 display: inline-block; 的特性,比如可以定义宽高:
<style>
span{
height: 100px;
width: 300px;
margin: 0 10px;
}
</style>
......
<body>
<span>111</span>
<span>222</span>
<span>333</span>
</body>
现在页面中有一个内联span标签,在不添加浮动的时候,定义宽高无效,如下:
而添加了浮动之后,span的宽高生效了
<style>
span{
height: 100px;
width: 300px;
margin: 0 10px;
float:left;
}
</style>
值得一提的是:元素除了浮动外,并没有添加 display: inline-block;
也就是说,这种特性是float自带的,而不是通过修改了元素样式得来的。
五、清除浮动 (clear)
清除浮动也是一个CSS属性,用作清除浮动。
注意:初学者容易认为清除浮动是清除自身的浮动,而错误的使用了clear属性, 比如:
.div1{
height: 100px;
width: 100px;
background: red;
float: left;
clear: both;
}
.div2{
height: 200px;
width: 200px;
background: green;
}
这种用法和理解是错误的(给div设置float和clear),得到的结果仍是浮动:
清除浮动应该理解为 : 清除该元素周围的浮动,而不是自身浮动,如果想清除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浮动
我们可以检查一下页面:
div2不浮动,默认占满一整行,div1浮动了,不再占满整行,尽管div2设置清除浮动,但不会影响div1浮动。
就算给div1设置清除浮动,也不会把div1从浮动变为不浮动:
.div1{
height: 100px;
width: 100px;
background: red;
float: left;
clear: both;
}
以上就是我对浮动的总结和认识,其中很多是我的个人总结,并不一定正确,而且描述的可能也未必恰当,毕竟我也是一个 新手,希望多多见谅。