css 基础 - float 基本使用

最新推荐文章于 2024-05-05 20:21:31 发布

_龙衣

最新推荐文章于 2024-05-05 20:21:31 发布

阅读量2k

点赞数

分类专栏： CSS 基础文章标签： css 前端 css3

本文链接：https://blog.csdn.net/ITxiaodong/article/details/121892665

版权

7 篇文章 1 订阅

订阅专栏

css 中的 float 是什么

Float 是一个 CSS 定位属性，它指定一个元素应沿其容器（块布局）的左侧left或右侧right放置，允许文本和内联元素环绕它。该元素也从网页的正常流动(文档流)中移除。

float 浮动的常用的几种值

在这里插入图片描述

在这里插入图片描述

当然你还可以选择使用flex或者grid布局实现。

在这里插入图片描述

当头像大小改变时，文本也将重新改变布局。

在这里插入图片描述

当一个元素浮动之后，它会被移出正常的文档流（默认的文档流形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）），然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

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

有时我们需要：

使用 clear 属性，clear 浮动的常用的几种值

具体使用在示例中。