abstract： 如果把边框看做是盒子模型这个大家庭中的家长，那么浮动就是一个调皮的小孩子。因为，浮动属性是针对于当前被设置浮动的标签的上一级内容而言的。浮动是一个比较特殊的css属性，它会破坏掉当前你当前被设置浮动的标签内的布局排版，直接漂浮到所有内容的的上方。具体的我们用代码康康，下面上代码：<!doctype
如果把边框看做是盒子模型这个大家庭中的家长，那么浮动就是一个调皮的小孩子。因为，浮动属性是针对于当前被设置浮动的标签的上一级内容而言的。浮动是一个比较特殊的css属性，它会破坏掉当前你当前被设置浮动的标签内的布局排版，直接漂浮到所有内容的的上方。具体的我们用代码康康，下面上代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型--浮动</title>
<style type="text/css">
/*主要操作都在css里，html我只写了一个大致的框架样子*/
.bord1-fin{ width: 666px;height: 666px; background-color: black; border: 5px solid red;margin: 233px 233px;box-shadow: 10px 20px 30px 10px yellow;float: left;}
.bord1-cen1{ width: 600px;height: 321px; background-color: #ffffff; border: 5px solid orange;margin: auto;padding: auto;float: left;}}
.bord1-cen2{ width: 600px;height: 321px; background-color: #ffffff; border: 5px solid orange;margin: auto;padding: auto;float: left;}}
.bord1-li1{ width: 288px;height: 288px; background-color: pink; border: 5px dotted green;float: left;margin:12px auto;border-radius:25px;}
.bord1-li2{ width: 288px;height: 288px; background-color: pink; border: 5px dashed green;float: left;margin:12px auto;border-radius:25px;}
.bord1-li3{ width: 288px;height: 288px; background-color: pink; border: 5px dotted green;float: left;;margin:12px auto;border-radius:25px;}
.bord1-li4{ width: 288px;height: 288px; background-color: pink; border: 5px dashed green;float: left;margin:12px auto;border-radius:25px;}
/*右边浮动正常*/
.bord2-fin{ width: 666px;height: 666px; background-color: black; border: 5px solid red;margin: 233px 15px;box-shadow: 10px 20px 30px 10px yellow;float: right;}
.bord2-cen1{ width: 600px;height: 321px; background-color: #ffffff; border: 5px solid orange;margin: auto;padding: auto;}
.bord2-cen2{ width: 600px;height: 321px; background-color: #ffffff; border: 5px solid orange;margin: auto;padding: auto;}
.bord2-li1{ width: 288px;height: 288px; background-color: pink; border: 5px dotted green;float: left;margin:12px auto;border-radius:25px;}
.bord2-li2{ width: 288px;height: 288px; background-color: pink; border: 5px dashed green;float: right;margin:12px auto;border-radius:25px;}
.bord2-li3{ width: 288px;height: 288px; background-color: pink; border: 5px dotted green;float: left;;margin:12px auto;border-radius:25px;}
.bord2-li4{ width: 288px;height: 288px; background-color: pink; border: 5px dashed green;float: right;margin:12px auto;border-radius:25px;}
/*注：想要管住浮动这个捣蛋鬼，就必须找到这个捣蛋鬼的爸爸，因为浮动再调皮捣蛋，碰上了它的爸爸还是需要消停下来，这个爸爸角色就是你设置浮动的标签的上一级标签。*/
.clear { clear: both; }
</style>
</head>
<body>
<div class="oulaoula"><!-- 欧拉欧拉 -->
<div class="bord1-fin"><!-- 最外面的盒子边框--><!-- 这个盒子是用来和右面的盒子的浮动效果进行一个对比用的。 -->
<div class="bord1-cen1"><!-- 中间的边框 --><!-- 浮动慎用！慎用！ -->
<div class="bord1-li1"><p>浮动就是个捣蛋鬼，用不好的话就会非常气人，所以使用的时候需要慎重的考虑一下。</p></div><!-- 最里面的盒子1 左-->
<div class="bord1-li2"></div><!-- 最里面的盒子2 右-->
<!--<div class="bord1-cen2"></div>-->
<div class="bord1-li3"><p>但是对于浮动不能一棍子打死，浮动用的好的话是很神奇的，能够让页面标签很听话的去你想让它去的地方！</p></div><!-- 最里面的盒子3 左-->
<div class="bord1-li4"></div><!-- 最里面的盒子4 右-->
</div>
</div>
<div class="bord2-fin"><!-- 最外面的盒子边框-->
<div class="bord2-cen1"><!-- 中间的边框 -->
<div class="bord2-li1"><p>浮动就是个捣蛋鬼，用不好的话就会非常气人，所以使用的时候需要慎重的考虑一下。</p></div><!-- 最里面的盒子1 左-->
<div class="bord2-li2"></div><!-- 最里面的盒子2 右-->
</div>
<div class="bord2-cen2"><!---->
<div class="bord2-li3"><p>但是对于浮动不能一棍子打死，浮动用的好的话是很神奇的，能够让页面标签很听话的去你想让它去的地方！</p></div><!-- 最里面的盒子3 左-->
<div class="bord2-li4"></div><!-- 最里面的盒子4 右-->
</div>
</div>
<div class="clear"></div><!-- 这是为了防止页面布局散乱而设置的clear，用于清除浮动 -->
</div>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-05-22 09:27:44
Teacher's summary：完成的不错。浮动在移动端用到的比较多。继续加油。