22. CSS Float 浮动

CSS float 属性定义元素在哪个方向浮动,浮动元素会生成一个块级框,直到该块级框的外边缘碰到包含框或者其他的浮动框为止。

什么是 CSS Float(浮动)?

CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

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

float 属性

float 属性用于定位和格式化内容,例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一:

  • left – 元素浮动到其容器的左侧
  • right – 元素浮动在其容器的右侧
  • none – 元素不会浮动(将显示在文本中刚出现的位置)。默认值。
  • inherit – 元素继承其父级的 float 值

最简单的用法是,float 属性可实现(报纸上)文字包围图片的效果。

元素怎样浮动

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

一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

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

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

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

<style>
    img 
    {
    	float:right;
    }
</style>
</head>

<body>
    <p>在下面的段落中,我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
    <p>
    <img src="/attachments/cover/cover_css.png" width="95" height="84" />
    这是一些文本。这是一些文本。这是一些文本。
    ...
    </p>
</body>

效果如下:

元素怎样浮动

彼此相邻的浮动元素

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

在这里,我们对图片廊使用 float 属性:

<style>
    .thumbnail 
    {
    	float:left;
    	width:110px;
    	height:90px;
    	margin:5px;
    }
</style>
</head>

<body>
    <h3>图片库</h3>
    <p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
    <img class="thumbnail" src="https://media.mybj123.com/wp-content/uploads/2021/06/1622794248-ed2f9216850e250.jpg" width="107" height="90">
    ...
</body>

效果如下:

彼此相邻的浮动元素

清除浮动 – 使用 clear

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

clear 属性指定元素两侧不能出现浮动元素。

关于清除浮动相关知识大家可以看我之前写的文章《清除浮动有哪些方式?

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 22. CSS Float 浮动

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们