• 网站建设
• 网站制作
• 建站案例
• 解决方案
• 建站资讯
• 关于我们
• 联系小谭

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

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
我是行内元素，没有设置float

css样式为：

.a{width:320px;height:230px;background:gold;}
.b{background:red;}

浏览器显示的结果为：

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

我是块级元素，且设置了float
我是行内元素，没有设置float

css样式为：

.a{width:320px; height:230px; background:gold;float:left;}
.b{background:red;}

浏览器显示的结果为：

结论；

后面的元素会紧跟在前面的元素后面，且后面的元素会根据自身元素的特点来决定是否需要换行

3、如果前面的元素为行内元素，后面的为块级元素

我是行内元素，没有设置float
我是块级元素,没有设置float

css样式为：

.c{width:320px;height:230px;background:gold;}
.d{width:350px;height:280px;background:red;}

浏览器显示的结果为：

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

我是行内元素，并且设置float
我是块级元素,没有设置float

css样式为：

.c{width:320px; height:230px; background:gold;float:left;}
.d{width:350px; height:280px;background:red;}

浏览器显示的结果为：

总结：

1）行内元素设置了浮动，该元素则变成了内敛块级标签，可以设置宽高

2）脱离了文档流，原有的空间被后面没有设置浮动的元素占据

4、如果两个都是行内标签

我是行内元素，没有设置float
我是行内元素，没有设置float

css样式：

.e{width:320px;height:230px;background:gold;}
.f{width:350px;height:280px;background:red;}

浏览器显示的结果为：

如果给第一个设置了浮动：

我是行内元素，且设置了float
我是行内元素，没有设置float

css样式：

.e{width:320px; height:230px; background:gold;float:left;}
.f{width:350px; height:280px;background:red;}

浏览器显示的结果为：

总结：

后面的元素会紧跟在前面元素的后面，后面的元素会根据自身元素的特点来决定是否需要换行

五.浮动的具体细节

1）浮动元素不会在其浮动方向上溢出父级的包含块

也就是说元素左浮动，其左外边距不会超过父级的左内边距，元素右浮动，其右外边距不会超过父级的右内边距

2）浮动元素的位置受到同级同向浮动元素的影响

也就是说同一父级中有多个浮动元素，后一个元素的位置会受到前一个浮动元素位置的影响，他们不会相互遮挡，后一个浮动元素会紧挨着前一个浮动元素的左外边距进行定位，如果当前空间不足，则会换行，否则会放置在前一个浮动元素的下面

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）如果父级中的浮动元素的高度大于父级的高度，则该浮动元素会溢出该父级元素

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中浮动指的是什么”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！