css浮动的属性是什么

PHP中文网 • 2025年3月10日 20:11:32 • 编程技术 • 阅读 2

css浮动的属性是指“float”属性，用于指定一个盒子（元素）是否应该浮动，定义朝哪个方向浮动。元素使用了float属性后，可以使该元素脱离标准流本身，浮动在其他元素之上，使其不再占用原本属于该元素的空间。

本文操作环境：windows10系统、css3版本，Dell G3电脑。

1. 页面布局方式

页面布局方式，主要包含：文档流、浮动层、float属性。

1.1 文档流

立即学习“前端免费学习笔记（深入）”；

HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。

1.2 浮动层

浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。

而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。

1.3 float 属性介绍

float属性：用于指定一个盒子（元素）是否应该浮动，可以定义元素朝哪个方向浮动。

元素使用了float属性后，可以使该元素脱离标准流本身，浮动在其他元素之上，使其不再占用原本属于该元素的空间，这样会导致后面的元素上移并占用原本属于该元素的空间。

注意：绝对定位的元素忽略float属性！

属性值：

　　① left ：元素向左浮动。

　　② right ：元素向右浮动。

　　③ none ：默认值。

　　④ inherit ：从父元素继承float属性。

1.4 示例

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    2.3-float属性            #a        {            background-color:Red;            height:50px;            width:100px;        }        #b        {            background-color:Yellow;                height:50px;            width:200px;        }        #c        {            background-color:Blue;               height:50px;            width:300px;         }         #d         {            background-color:Gray;            height:50px;            width:400px;         }    div-a
div-b
div-c
div-d

登录后复制

（推荐教程：CSS视频教程）

2. float:left

说明：元素向左浮动。

2.1 代码变更

input2 添加：float:left

div-b 添加：float:left

div-d 添加：float:left

2.2 变更后视图

　　① 浏览器的宽度“不够长”时