0

0

float是什么?float属性详解

青灯夜游

青灯夜游

发布时间:2018-11-03 15:58:44

|

19468人浏览过

|

来源于php中文网

原创

float是什么?为什么要使用float?本篇文章就给大家介绍float是什么,让大家了解浮动对布局的作用,清除浮动的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

首先我们来了解一下float是什么?

float是css的一个定位属性。要了解它的目的和来源,我们可以看一下印刷设计。在打印布局中,可以将图像设置到页面中,使得文本根据需要包裹它们。这通常被恰当地称为“文本环绕”。这是一个例子:

1.png

在页面布局程序中,可以告知保存文本的框以遵循文本环绕,或忽略它。忽略文本环绕将允许单词在图像上方流动,就像它甚至不存在一样。这是该图像是页面流的一部分(或不是)的区别。网页设计非常相似。

2.png

在Web设计中,应用了CSS 浮动属性的页面元素就像打印布局中文本围绕它们的图像一样。浮动元素仍然是网页流的一部分。这与使用绝对定位的页面元素明显不同。绝对定位的页面元素将从网页流中被删除,就像打印布局中的文本框被告知忽略页面换行一样。绝对定位的页面元素不会影响其他元素的位置,其他元素也不会影响它们,无论它们是否相互接触。

使用CSS在元素上设置float会发生如下:

.demo {
  float: right;			
}

float属性有四个有效值,分别为:

left :设置元素向左浮动;

right :设置元素向右浮动;    

none :默认值,设置元素不浮动;

inherit :规定应该从父元素继承 float 属性的值。

为什么要使用float?

关于Objective
关于Objective

本文档主要讲述的是关于Objective-C手动内存管理的规则;在ios开发中Objective-C 增加了一些新的东西,包括属性和垃圾回收。那么,我们在学习Objective-C之前,最好应该先了解,从前是什么样的,为什么Objective-C 要增加这些支持。有需要的朋友可以下载看看

下载

3.png

浮动也有助于在较小区域内布局。以网页的这个小区域为例。如果我们对我们的小头像图像使用float,当该图像改变大小时,框中的文本将重排以适应:

4.png

使用容器上的相对定位和化身上的绝对定位也可以实现相同的布局。通过这种方式,文本将不受头像的影响,并且无法在大小更改时重排。

5.png

为什么要清除浮动?

float(浮动)可以让元素从正常流中移除,并且其他元素将显示在它旁边,因此如果我们想要阻止后续元素向上移动(如下图,阻止footer的上移),这就需要清除它。我们需要清除页脚(footer)的浮动,以确保它位于两个浮动列的下方。要解决此问题,就需要通过clear属性来实现了。

6.png

.footer {
  clear: both;
}

7.png

clear属性有五个有效值,分别为:

left:清除在左侧浮动的元素。    

right:清除在右侧浮动的元素。    

both:清除左右两侧均浮动的元素。    

none:默认值,允许浮动元素出现在两侧。 除非从级联中删除clear值,否则通常是不必要的值。

inherit:设置规定应该从父元素继承 clear 属性的值。    

总结:以上就是本篇文章有关float相关问题的全部内容,希望能对大家的学习有所帮助。

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

42

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

46

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

202

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

341

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

16

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

100

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

73

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

75

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

67

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

CSS教程
CSS教程

共754课时 | 23.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号