这篇文章给大家分享的是有关css中如何进行元素浮动的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联成立与2013年，先为涉县等服务建站，涉县等地企业，进行企业商务咨询服务。为涉县企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
css的三种引入方式
1.行内样式，最直接最简单的一种，直接对HTML标签使用style=""。2.内嵌样式，就是将CSS代码写在之间，并且用
进行声明。3.外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上
就可以了。其次就是导入样式，导入样式和链接样式比较相似，采用@import样式导入CSS样式表，不建议使用。在css中，可以使用float属性，设置“float:left”或“float:right”样式来进行元素浮动。一旦一个元素浮动了，将能够并排，并且能够设置宽高，无论它原来是块级元素还是行内元素。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
浮动float的原本设计了作用初衷是为了实现文字环绕效果
浮动的语法：float:left/right;
使用了float:left或float:right或两者都是会产生的浮动。
浮动的性质
浮动是css里面布局用的最多的属性。
现在有两个div，分别设置宽高。我们知道，它们的效果如下：
此时，如果给这两个div增加一个浮动属性，比如float: left;，效果如下：
这就达到了浮动的效果。此时，两个元素并排了，并且两个元素都能够设置宽度、高度了（这在上一段的标准流中，不能实现）。
浮动想学好，一定要知道三个性质。接下来讲一讲。
性质1：浮动的元素脱标
脱标即脱离标准流。我们来看几个例子。
证明1：
上图中，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个
还在自己的层面上遵从标准流进行排列。
证明2：
上图中，span标签在标准流中，是不能设置宽高的（因为是行内元素）。但是，一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了。
所以能够证明一件事：一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。所有标签，浮动之后，已经不区分行内、块级了。
性质2：浮动的元素互相贴靠
我们来看一个例子就明白了。
我们给三个div均设置了float: left;属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果：
上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号大哥。
如果没有足够的空间靠着1号大哥，3号自己去贴左墙。
不过3号自己去贴墙的时候，注意：
上图显示，3号贴左墙的时候，并不会往1号里面挤。
同样，float还有一个属性值是right，这个和属性值left是对称的。
性质3：浮动的元素有“字围”效果
来看一张图就明白了。我们让div浮动，p不浮动。
上图中，我们发现：div挡住了p，但不会挡住p中的文字，形成“字围”效果。
总结：标准流中的文字不会被浮动的盒子遮挡住。（文字就像水一样）
关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。
性质4：收缩
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
举例如下：
上图中，div本身是块级元素，如果不设置width，它会单独霸占整行；但是，设置div浮动后，它会收缩
浮动的补充（做网站时注意）
上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：
布置一个作业
布置一个作业，要求实现下面的效果：
为实现上方效果，代码如下：
Document
*{
margin: 0;
padding: 0;
}
.header{
width: 970px;
height: 103px;
/*居中。这个语句的意思是：居中：*/
margin: 0 auto;
}
.header .logo{
float: left;
width: 277px;
height: 103px;
background-color: red;
}
.header .language{
float: right;
width: 137px;
height: 49px;
background-color: green;
margin-bottom: 8px;
}
.header .nav{
float: right;
width: 679px;
height: 46px;
background-color: green;
}
.content{
width: 970px;
height: 435px;
/*居中，这个语句今天没讲，你照抄，就是居中：*/
margin: 0 auto;
margin-top: 10px;
}
.content .banner{
float: left;
width: 310px;
height: 435px;
background-color: gold;
margin-right: 10px;
}
.content .rightPart{
float: left;
width: 650px;
height: 435px;
}
.content .rightPart .main{
width: 650px;
height: 400px;
margin-bottom: 10px;
}
.content .rightPart .links{
width: 650px;
height: 25px;
background-color: blue;
}
.content .rightPart .main .news{
float: left;
width: 450px;
height: 400px;
}
.content .rightPart .main .hotpic{
float: left;
width: 190px;
height: 400px;
background-color: purple;
margin-left: 10px;
}
.content .rightPart .main .news .news1{
width: 450px;
height: 240px;
background-color: skyblue;
margin-bottom: 10px;
}
.content .rightPart .main .news .news2{
width: 450px;
height: 110px;
background-color: skyblue;
margin-bottom: 10px;
}
.content .rightPart .main .news .news3{
width: 450px;
height: 30px;
background-color: skyblue;
}
.footer{
width: 970px;
height: 35px;
background-color: pink;
/*没学，就是居中：*/
margin: 0 auto;
margin-top: 10px;
}
