CSS Float(浮动)
程序员文章站
2022-04-20 23:50:42
...
CSS Float(浮动)
什么是CSS Float(浮动)?
CSS的Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
Float(浮动),往往是用于图像,但它在布局时一样也非常有用。
元素怎么样浮动呢?
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边边缘碰到包含框或另一个浮动框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受影响。
如果图像是右浮动,下面的文本流将环绕在它左边:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中,我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="logocss.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>
效果图如下所示:
彼此相邻的浮动元素
如果你把几个浮动元素放到一起时,如果有空间,它们将彼此相邻。
在这里,我们对图片使用float属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>
效果图如下所示:
清除浮动-使用clear
元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用clear属性。
clear属性指定元素两侧不能出现浮动元素。
使用clear属性往文本添加图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>
效果图如下所示:
上一篇: 数据库泵EXPDP导出用户下所有表
下一篇: oracle
推荐阅读
-
推荐:Web开发者的六个代码调试平台_html/css_WEB-ITnose
-
跨平台移动开发 Xuijs超轻量级的框架+Emile CSS动画_html/css_WEB-ITnose
-
求个html帮助文档的下载地址。。。。多谢_html/css_WEB-ITnose
-
JS/CSS实现字符串单词首字母大写功能
-
html表单验证证件类型和证件号码匹配,并验证问题_html/css_WEB-ITnose
-
ecshop调用文章显示上一篇下一篇_html/css_WEB-ITnose
-
css?reset 以及哪些元素有默认margin?padding值_html/css_WEB-ITnose
-
DIV+CSS布局问题_html/css_WEB-ITnose
-
超好玩!10款神奇的字符图案 & 词汇云生成工具_html/css_WEB-ITnose
-
深入CSS,让网页开发少点“坑”_html/css_WEB-ITnose