版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
CSS中关于浮动的探究
浮动(float)属性作为CSS中的重要属性,在网页设计中有着至关重要的作用。
float属性有两个作用:
*可以实现让浮动的框向左、向右移动,指到它的外边缘碰到包含它框的边缘或其他浮动框的边缘
*浮动属性的元素脱离了标准文档流,可以认为浮动的元素不在普通的文档流中
我们可以通过以下几幅图来了解CSS中的float属性:
如下图所示,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘。
如下图所示,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框
在实际的运用中,我们经常会碰到框与文本的结合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框与文本的结合</title>
<style type="text/css">
div{
width: 300px;
height: 200px;
border: 2px solid yellowgreen;
}
img{
width:80px;
/* height:80px;*/
float: left;
}
</style>
</head>
<body>
<div>
<img src="pikaqiu.jpg"/>
<p>让我们更清楚地看到框与文本结合后出现的效果,可以发现文本环绕在框的周边。浮动元素脱离了标准文档流,正常情况下应该是文本中有一部分文字会被覆盖,但其却环绕在框的周边。</p>
</div>
</body>
</html>
既然浮动元素脱离了文档流,为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢?
浮动的目的。最初时,浮动只能用于图像(某些浏览器还支持表的浮动),目的就是为了允许其他内容(如文本)“围绕”该图像。而后来的CSS允许浮动任何元素。
清除浮动
常见的清除浮动有两种方法:
*clear清除浮动(只能清除元素左右两侧元素浮动的影响)
*overflow(hidden)清除浮动
清除浮动使文本不在受到框浮动的影响,避免浮动对其它元素的影响。
<style type="text/css">
div{
width: 300px;
height: 200px;
border: 2px solid yellowgreen;
}
img{
width:80px;
/* height:80px;*/
float: left;
}
p{
clear: left;/*或 overflow: hidden;*/
}
</style>