Float（浮动）

最新推荐文章于 2022-04-07 17:42:04 发布

westenboy

最新推荐文章于 2022-04-07 17:42:04 发布

阅读量543

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/westenboy/article/details/50680386

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。

（1）右浮动：

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：

左浮动：

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

清除浮动：

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素：

<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<h3 class="text_line">Second row</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
</body>
</html>

westenboy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Float（浮动）

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。（1）右浮动：一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边：
复制链接

扫一扫