简单说浮动即:css样式中的定位属性。元素的水平方向浮动,意味着元素只能左右移动而不能上下移动,一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。其周围的元素也会重新排列
(1、浮动元素之后的元素将围绕它。 2、浮动元素之前的元素将不会受到影响。3、如果图像是右浮动,下面的文本流将环绕在它左边:)。
如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻,实现元素的一行排列。。(注意,浮动的元素会脱离原本的文档流)
讲解:
先设置三个框!
.box1{
background-color: red;
width: 200px;
height: 200px;
padding: 1px;
}
.box2{
background-color: blue;
width: 200px;
height: 200px;
padding: 1px;
}
.box3{
background-color: green;
width: 200px;
height: 200px;
padding: 1px;
}
如图所示:将框 1 向右浮动时,框1脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:
.box1{
background-color: red;
width: 200px;
height: 200px;
padding: 1px;
float: right;
}
.box2{
background-color: blue;
width: 200px;
height: 200px;
padding: 1px;
}
.box3{
background-color: green;
width: 200px;
height: 200px;
padding: 1px;
}
但如果框 1 向左浮动。会消失,因为被框2覆盖住了,从视图中消失。
因为它脱离文档流,不再处于文档流中,所以它不占据空间。
.box1{
background-color: red;
width: 200px;
height: 200px;
padding: 1px;
float: left;
}
.box2{
background-color: blue;
width: 200px;
height: 200px;
padding: 1px;
}
.box3{
background-color: green;
width: 200px;
height: 200px;
padding: 1px;
}
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
.box1{
background-color: red;
width: 200px;
height: 200px;
padding: 1px;
float: left;
}
.box2{
background-color: blue;
width: 200px;
height: 200px;
padding: 1px;
float: left;
}
.box3{
background-color: green;
width: 200px;
height: 200px;
padding: 1px;
float: left;
}
总之,浮动后脱离原先文档流,后面元素会顶替被浮动元素的位置。如上列子:第一框浮动后,框1脱离原先的文档流,故框2会占据框1的位置,框3和框2仍处于原先的文档流中,故会框2框3仍按照原先排布方式排列。若框2框1均浮动,则只能在页面视图看到框3,框2框1被框三遮盖
说了浮动,为了消除浮动对其他页面元素的影响。消除浮动有一下几种方法:
1、在被浮动的元素的下一元素的CSS样式中加上 clear:both.
.box1{
background-color: red;
width: 200px;
height: 200px;
padding: 1px;
float: left;
}
.box2{
background-color: blue;
width: 200px;
height: 200px;
padding: 1px;
clear: both;
}
.box3{
background-color: green;
width: 200px;
height: 200px;
padding: 1px;
}
2、给被浮动的元素设置边框,强行占据位置,让后面的元素不会因为前者浮动而受影响。
3、给下一元素设置值为hidden或者auto (overflow: auto;)。也可以清楚上一元素浮动产生的影响。