码云学习 CSS 2021-06-24

22. CSS Float 浮动

文章目录隐藏

什么是 CSS Float（浮动）？
float 属性
元素怎样浮动
彼此相邻的浮动元素
清除浮动 – 使用 clear

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>

效果如下：