十三：CSS Float(浮动)

 

CSS的Float(浮动)，元素可以围绕其他元素向左或向右被推动

Float(浮动)，往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或右。通常，这意味着尽所有的可能在所有包含元素的左侧或右侧的。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边:

<html>
<head>
<style>
img 
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中，我们增加了一个样式 <b>float:right</b>，结果图像浮动到了段落的右侧。</p>
<p>
<img src="/demo/logocss.gif" width="95" height="84">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>

 

 

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们已经对图片廊使用float属性：

<html>
<head>
<style>
.thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>试着调整网页窗口的宽度，看看会发生什么。</p>
<img class="thumbnail" src="/static/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/static/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/static/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/static/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/static/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/static/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/static/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/static/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>

清除浮动 - 使用clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性

。clear属性指定其他元素双方都不能使用元素的浮动功能。

使用clear属性往文本中添加图片廊：

<html>
<head>
<style>
.thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="/static/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/static/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/static/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/static/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">Second row</h3>
<img class="thumbnail" src="/static/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/static/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/static/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/static/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>

所有CSS浮动属性

"CSS" 列中的数字表示不同的CSS版本 (CSS1 or CSS2)定义了该属性。

 

属性描述值CSS
clear 指定不允许元素周围有浮动元素 left
right
both
none
inherit		 1
float 指定Box是否可以浮动 left
right
none
inherit		 1

 

posted on 2018-07-10 22:29  myworldworld  阅读(68)  评论(0)    收藏  举报

导航