学习任务
float浮动产生的效果
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>浮动小练习</title>
<style>
.outer{
width: 500px;
border: 1px solid black;
}
.inner{
height: 100px;
width: 100px;
background-color: skyblue;
margin: 10px;
}
</style>
</head>
<body>
<!-- <div class="outer">
<div class="inner" style="float: right;">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div> -->
<!-- <div class="outer">
<div class="inner" style="float: left;">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
</div> -->
<!-- <div class="outer">
<div class="inner" style="float: left;">7</div>
<div class="inner" style="float: left;">8</div>
<div class="inner" style="float: left;">9</div>
</div> -->
<!-- <div class="outer">
<div class="inner" style="width: 200px; height: 200px; float: left;">a</div>
<div class="inner" style="width: 200px; height: 200px; float: left;">b</div>
<div class="inner" style="width: 200px; height: 200px; float: left;">c</div>
</div> -->
<!-- <div class="outer">
<div class="inner" style="float: left; width: 200px; height: 250px;">d</div>
<div class="inner" style="float: left; width: 200px; height: 200px;">e</div>
<div class="inner" style="float: left; width: 200px; height: 200px;">f</div>
</div> -->
</body>
</html>学习方式
分别查看每一个outer类的div产生的效果，将其他div注释。
代码效果
第一个div
第二个div
第三个div
第四个div
第五个div
总结
float的效果多变，需要不断学习，慢慢了解，慢慢分析。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
