float的作用
来源：4-11 编程练习
今天也要好好学java
2020-12-23 22:06:18
虽然调试出来示例的效果，但是我不是很明白三块float的作用，img和div0以及div1、div2...的float的作用。
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码，
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div0{
border:1px solid;
width:810px;
padding-left:20px;
padding-bottom:20px;
box-sizing:border-box;
float:left;
}
#div1,#div2,#div3,#div4,#div5,#div6{
float:left;
outline:solid 1px;
margin-top:20px;
margin-right:20px;
text-indent:0.3em;
}
img{
float:left;
vertical-align:bottom;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="div0">
<div id="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" />
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div id="div2">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" />
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div id="div3">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" />
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div id="div4">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" />
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div id="div5">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" />
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div id="div6">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" />
<div>欢迎来到慕课网学习新知识!</div>
</div>
</div>
</body>
</html>
可通过选择【代码语言】突出显示
1回答
-
同学你好
1、关于div0设置float的作用：父元素中加上float:left的作用是为了避免浮动塌陷。这里同学可以去掉float:left试一下哟，由于父元素的高度是靠子元素的高度撑起来的，但子元素都浮动起来了，无法支撑父元素的高度。所以父元素的高度会塌陷当父元素也浮动起来之后，就又在一个平面上了，就又被子元素的高度撑起来了
2、div1、div2等设置浮动可以使div1等一排显示3个，因为这里div0设置了具体的宽度，当不设置浮动时，每个div1、div2等是垂直进行显示的，所以设置浮动后正好可以一排显示3个
当设置浮动后显示的是一排两个，是因为同学设置了text-indent: 0.3em;，父元素的宽度一排显示三个不够，所以这里显示的是两个
3、div中的img设置浮动可以将图片正好显示在div中，这样就可以一排显示3个
祝学习愉快~
0
相似问题