html的浮动作用是什么意思,html中浮动是什么

在HTML中，浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距，只需要给元素设置“float:left|right|none|inherit”样式即可。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

一.什么是浮动(float)？

浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素)

二.浮动(float)语法：

float:left或者right或者none或者inherit

left：让元素向左浮动

right：让元素向右浮动

none：让元素不浮动

inherit：让元素从父级继承浮动属性

三.浮动的特性

1.支持所有的css样式

2.内容撑开宽高

3.多个元素设置浮动，会排在一排

4.脱离文档流

5.提升层级半级

也就是说：一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围

注意：不管是什么属性的元素，如果设置了浮动属性，该元素就变成了具有inline-block属性的元素

四.浮动的具体表现

1、如果三个元素为block元素，在未设置浮动前

html样式：

我是块级元素1，没有设置浮动

我是块级元素2，没有设置浮动

我是块级元素3，没有设置浮动

css样式为：.class1{width:100px;height:100px;background:palegreen;}

.class2{width:120px;height:130px;background:gold;}

.class3{width:160px;height:180px;background:red;}

浏览器显示的结果为：

如果给第一个元素设置向左浮动：

我是块级元素1，设置向左浮动

我是块级元素2，没有设置浮动

我是块级元素3，没有设置浮动

css样式为：.class1{width:100px; height:100px;background:palegreen;float:left;}

.class2{width:120px; height:130px;background:gold;}

.class3{width:160px; height:180px;background:red;}

浏览器显示的结果为：

结论：

1)没有设置浮动的元素会填充浮动元素留下来的空间

2)浮动元素会和非浮动元素发生重叠，浮动元素会在图层的最上面

3)使用浮动时，该元素会脱离文档流，后面的元素会无视这个元素，但依然会为这个浮动元素让出位置，并且元素中的文字内容会环绕在其周围

2、如果一个块级元素和一个行内元素(或者是一个内敛块级元素)我是块级元素，没有设置float