在HTML中，浮动意味着一个元素可以向左或向右移动，直到它的外部边距接触到它的父元素的内部边距或前一个元素的外部边距。只需为元素设置“float:left|right|none|inherit”的样式。
本课程运行环境:windows7系统，CSS3 &；& ampHTML5版本5，戴尔G3电脑。
一、什么是浮动？
浮动意味着一个元素可以向左或向右移动，直到它的外部边距接触到它的父元素的内部边距或前一个元素的外部边距(这里的前一个元素将紧挨着前一个元素，无论它是否设置为浮动)。
2.浮点语法:
浮动:左或右或无或继承
Left:将元素向左浮动。
Right:将元素向右浮动。
无:保持元素浮动。
Inherit:让元素从父元素继承浮动属性。
三。浮动特征
1.支持所有css样式。
2.内容又广又高
3.多个元素被设置为浮动，并将被排列成一行。
4.脱离文档流
5.把等级提高一半。
也就是说，一个元素设置了浮动属性后，下一个元素会忽略这个元素的存在，但是下一个元素中的文本内容仍然会让这个元素在设置的浮动元素周围环绕自己的文本内容。
注意:不管属性是什么，如果设置了floating属性，元素就变成了具有inline-block属性的元素。
四。浮动的具体表现
1.如果三个元素是块元素，则在设置浮动之前。
Html样式:
<div class="class1">我是块级元素1，没有设置浮动</div> <div class="class2">我是块级元素2，没有设置浮动</div> <div class="class3">我是块级元素3，没有设置浮动</div>css样式是:
.class1{width:100px;height:100px;background:palegreen;} .class2{width:120px;height:130px;background:gold;} .class3{width:160px;height:180px;background:red;}浏览器显示的结果如下:
如果为第一个元素设置了向左浮动:
<div class="class1">我是块级元素1，设置向左浮动</div> <div class="class2">我是块级元素2，没有设置浮动</div> <div class="class3">我是块级元素3，没有设置浮动</div>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)未设置为float的元素将填充浮动元素留下的空空间。
2)浮动元素将与非浮动元素重叠，浮动元素将在层的顶部。
3)使用浮动时，元素会脱离文档流，后面的元素会忽略该元素，但仍会为浮动元素腾出空间，元素中的文本内容会将其包围。
2.如果块级元素和内联元素(或内向块级元素)
<divclass="a">我是块级元素，没有设置float</div> <span class="b">我是行内元素，没有设置float</span>css样式是:
.a{width:320px;height:230px;background:gold;} .b{background:red;}浏览器显示的结果如下:
如果为第一个元素设置了向左浮动:
<div class="a">我是块级元素，且设置了float</div> <span class="b">我是行内元素，没有设置float</span>css样式是:
.a{width:320px; height:230px; background:gold;float:left;} .b{background:red;}浏览器显示的结果如下:
结论；
后面的元素会紧跟前面的元素，后面的元素会根据自己的特点决定是否需要换行。
3.如果前面的元素是行内元素，后面的元素是块级元素。
<span class="c">我是行内元素，没有设置float</span> <div class="d">我是块级元素,没有设置float</div>css样式是:
.c{width:320px;height:230px;background:gold;} .d{width:350px;height:280px;background:red;}浏览器显示的结果如下:
如果为第一个元素设置了浮动
<span class="c">我是行内元素，并且设置float</span> <div class="d">我是块级元素,没有设置float</div>css样式是:
.c{width:320px; height:230px; background:gold;float:left;} .d{width:350px; height:280px;background:red;}浏览器显示的结果如下:
总结:
1)在行中设置浮动元素时，该元素成为一个内向的块级标签，可以设置宽度和高度。
2)出了文档流，原来空的房间被元素占据，后面没有浮动。
4.如果两者都是内嵌标签。
<span class="e">我是行内元素，没有设置float</span> <span class="f">我是行内元素，没有设置float</span>Css样式:
.e{width:320px;height:230px;background:gold;} .f{width:350px;height:280px;background:red;}浏览器显示的结果如下:
如果第一个设置为浮动:
<span class="e">我是行内元素，且设置了float</span> <span class="f">我是行内元素，没有设置float</span>Css样式:
.e{width:320px; height:230px; background:gold;float:left;} .f{width:350px; height:280px;background:red;}浏览器显示的结果如下:
总结:
后面的元素会紧跟前面的元素，后面的元素会根据自己的特点决定是否需要换行。
动词 （verb的缩写）彩车的具体细节
1)浮动元素不会在其浮动方向上溢出父元素的包含块。
也就是说，如果一个元素向左浮动，它的左外边距不会超过父元素的左内边距，如果向右浮动，它的右外边距不会超过父元素的右内边距。
2)浮动元素的位置受同级和同方向浮动元素的影响
也就是说，同一个父元素中有多个浮动元素，后一个元素的位置会受到前一个浮动元素位置的影响，不会互相遮挡。后一个浮动元素会放在前一个浮动元素的左外缘旁边，如果current 空不够就换行，否则放在前一个浮动元素下面。
<div id="wrap2"> <div class="class1"></div> <div class="class2"></div> <div class="class3"></div> <div class="class4"></div> </div>Css样式
#wrap2{width:550px;height:600px;border:3pxsolid red;} .class1{width:200px;height:400px;background: blue;float:left;} .class2{width:200px;height:200px;background: yellow;float:left;} .class3{width:200px;height:200px;background: fuchsia;float:left;} .class4{width:200px;height:200px;background: chartreuse;float:left;}3)浮动元素不会与不同方向的浮动元素重叠。
4)如果父元素中浮动元素的高度大于父元素的高度，浮动元素将溢出父元素。
<p id="wrap3"> <p class="class5"></p> <p class="class6"></p> <p class="class7"></p> <p class="class8"></p> </p>Css样式
#wrap3{width:350px;height:600px;border:3pxsolid red;} .class5{width:200px;height:200px;background: blue;float:left;} .class6{width:200px;height:200px;background: yellow;float:right;} .class7{width:200px;height:200px;background: fuchsia;float:left;} .class8{width:200px;height:200px;background: chartreuse;float:right;}推荐学习:html视频教程
以上是html中什么是浮动的细节。更多详情请关注AdminJS.cn其他相关文章！
adminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 在Adminjs.cn中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能！