【CSS】 Float(浮动)

快来打我* 2022-04-23 08:42 336阅读 0赞

### 什么是 CSS Float（浮动）？ ###

![在这里插入图片描述][20190129181403885.png]  
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。  
Float（浮动），往往是用于图像，但它在布局时一样非常有用。

### 元素怎样浮动 ###

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

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

![在这里插入图片描述][2019012918151879.png]

### 彼此相邻的浮动元素 ###

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。  
在这里，我们对图片廊使用 float 属性：

<style>
    	.thumbnail {
    		float:left;
    		width:110px;
    		height:90px;
    		margin:5px;
    	}
    </style>
    <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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70]

### 清除浮动 - 使用 clear ###

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

<style>
    	.thumbnail {
    		float:left;
    		width:110px;
    		height:90px;
    		margin:5px;
    	}
    	.text_line
    	{
    		clear:both;
    		margin-bottom:2px;
    	}
    </style>
    <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>

[20190129181403885.png]: /images/20220322/f6b6bc6a87f94376a52541d451f268fb.png
[2019012918151879.png]: /images/20220322/8ae13223274545aea4fa30f12dd715c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70]: /images/20220322/168e042dfa9449199bf5182a9be7e219.png

发表评论取消回复

表情：

评论列表（有 0 条评论，336人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS - 浮动布局（float）

目录标准布局标准流浮动与浮动流，及元素脱标概念浮动元素浮动的特点浮动带来的问题：标准流父级容器高度塌陷清除浮动浮动布局 + margin负值

小灰灰/ 2023年09月28日 15:57/ 0 赞/ 19 阅读

相关 CSS学习笔记（浮动float）

一、标准流（normal flow）标准流又称为文档流，普通流。标准流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思。比如块级元素会独占一行，行内元素

太过爱你忘了你带给我的痛/ 2023年02月27日 10:56/ 0 赞/ 3 阅读

相关 CSS浮动以及清除浮动float

float设定浮动 > 浮动的元素脱离标准流（文档流），相当于飘浮起来了，会释放原先占有的位置，位置不再保留，浮动的元素都具有行内块元素的特性，浮动的盒子只会影响后面的标

女爷i/ 2023年01月18日 06:38/ 0 赞/ 157 阅读

相关 CSS基础——浮动（float）【学习笔记】

1. 浮动(float) 1.1 CSS 布局的三种机制 > 网页布局的核心——就是用 CSS 来摆放盒子。 CSS 提供了 3 种机制来设置盒子的摆放位置，分别

系统管理员/ 2022年12月23日 00:56/ 0 赞/ 140 阅读

相关 CSS Float（浮动)

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

向右看齐/ 2022年06月09日 14:49/ 0 赞/ 301 阅读

相关 CSS基础知识（三）——浮动float

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 float

本是古典何须时尚/ 2022年06月01日 02:26/ 0 赞/ 295 阅读

相关 CSS浮动（float,clear）通俗讲解

开始之前，我们先来了解一下两个概念：标准文档流说白了就是一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

系统管理员/ 2022年05月27日 05:43/ 0 赞/ 233 阅读

相关【CSS】 Float(浮动)

什么是 CSS Float（浮动）？ ![在这里插入图片描述][20190129181403885.png] CSS 的 Float（浮动），会使元素向左或向右移动，

快来打我*/ 2022年04月23日 08:42/ 0 赞/ 337 阅读

相关 CSS之清除float浮动

转自: [http://www.divcss5.com/jiqiao/j406.shtml][http_www.divcss5.com_jiqiao_j406.shtml]

﹏ヽ暗。殇╰゛Y/ 2022年03月20日 05:21/ 0 赞/ 295 阅读

相关 CSS float 浮动属性

本篇主要介绍`float`属性：定义元素朝哪个方向浮动。目录 1. 页面布局方式：介绍文档流、浮动层以及`float`属性。 2. `float:left` ：介

淩亂°似流年/ 2021年07月04日 12:31/ 0 赞/ 529 阅读