摘要： 如果把邊框看做是盒子模型這個(gè)大家庭中的家長(zhǎng)，那么浮動(dòng)就是一個(gè)調(diào)皮的小孩子。因?yàn)?，浮?dòng)屬性是針對(duì)于當(dāng)前被設(shè)置浮動(dòng)的標(biāo)簽的上一級(jí)內(nèi)容而言的。浮動(dòng)是一個(gè)比較特殊的css屬性，它會(huì)破壞掉當(dāng)前你當(dāng)前被設(shè)置浮動(dòng)的標(biāo)簽內(nèi)的布局排版，直接漂浮到所有內(nèi)容的的上方。具體的我們用代碼康康，下面上代碼：<!doctype
如果把邊框看做是盒子模型這個(gè)大家庭中的家長(zhǎng)，那么浮動(dòng)就是一個(gè)調(diào)皮的小孩子。因?yàn)椋?dòng)屬性是針對(duì)于當(dāng)前被設(shè)置浮動(dòng)的標(biāo)簽的上一級(jí)內(nèi)容而言的。浮動(dòng)是一個(gè)比較特殊的css屬性，它會(huì)破壞掉當(dāng)前你當(dāng)前被設(shè)置浮動(dòng)的標(biāo)簽內(nèi)的布局排版，直接漂浮到所有內(nèi)容的的上方。具體的我們用代碼康康，下面上代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型--浮動(dòng)</title>
<style type="text/css">
/*主要操作都在css里，html我只寫(xiě)了一個(gè)大致的框架樣子*/
.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;}
/*右邊浮動(dòng)正常*/
.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;}
/*注：想要管住浮動(dòng)這個(gè)搗蛋鬼，就必須找到這個(gè)搗蛋鬼的爸爸，因?yàn)楦?dòng)再調(diào)皮搗蛋，碰上了它的爸爸還是需要消停下來(lái)，這個(gè)爸爸角色就是你設(shè)置浮動(dòng)的標(biāo)簽的上一級(jí)標(biāo)簽。*/
.clear { clear: both; }
</style>
</head>
<body>
<div class="oulaoula"><!-- 歐拉歐拉 -->
<div class="bord1-fin"><!-- 最外面的盒子邊框--><!-- 這個(gè)盒子是用來(lái)和右面的盒子的浮動(dòng)效果進(jìn)行一個(gè)對(duì)比用的。 -->
<div class="bord1-cen1"><!-- 中間的邊框 --><!-- 浮動(dòng)慎用！慎用！ -->
<div class="bord1-li1"><p>浮動(dòng)就是個(gè)搗蛋鬼，用不好的話就會(huì)非常氣人，所以使用的時(shí)候需要慎重的考慮一下。</p></div><!-- 最里面的盒子1 左-->
<div class="bord1-li2"></div><!-- 最里面的盒子2 右-->
<!--<div class="bord1-cen2"></div>-->
<div class="bord1-li3"><p>但是對(duì)于浮動(dòng)不能一棍子打死，浮動(dòng)用的好的話是很神奇的，能夠讓頁(yè)面標(biāo)簽很聽(tīng)話的去你想讓它去的地方！</p></div><!-- 最里面的盒子3 左-->
<div class="bord1-li4"></div><!-- 最里面的盒子4 右-->
</div>
</div>
<div class="bord2-fin"><!-- 最外面的盒子邊框-->
<div class="bord2-cen1"><!-- 中間的邊框 -->
<div class="bord2-li1"><p>浮動(dòng)就是個(gè)搗蛋鬼，用不好的話就會(huì)非常氣人，所以使用的時(shí)候需要慎重的考慮一下。</p></div><!-- 最里面的盒子1 左-->
<div class="bord2-li2"></div><!-- 最里面的盒子2 右-->
</div>
<div class="bord2-cen2"><!---->
<div class="bord2-li3"><p>但是對(duì)于浮動(dòng)不能一棍子打死，浮動(dòng)用的好的話是很神奇的，能夠讓頁(yè)面標(biāo)簽很聽(tīng)話的去你想讓它去的地方！</p></div><!-- 最里面的盒子3 左-->
<div class="bord2-li4"></div><!-- 最里面的盒子4 右-->
</div>
</div>
<div class="clear"></div><!-- 這是為了防止頁(yè)面布局散亂而設(shè)置的clear，用于清除浮動(dòng) -->
</div>
</body>
</html>
批改老師：查無(wú)此人批改時(shí)間：2019-05-22 09:27:44
老師總結(jié)：完成的不錯(cuò)。浮動(dòng)在移動(dòng)端用到的比較多。繼續(xù)加油。