摘要： 如果把邊框看做是盒子模型這個大家庭中的家長，那么浮動就是一個調皮的小孩子。因為，浮動屬性是針對于當前被設置浮動的標簽的上一級內容而言的。浮動是一個比較特殊的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>
批改老師：查無此人批改時間：2019-05-22 09:27:44
老師總結：完成的不錯。浮動在移動端用到的比較多。繼續(xù)加油。