2.各种浮动情况
-
box1 box2 都浮动
box1 box2不再遵循普通文档流的占据一行规则,变得可以水平排布。box3往上占据空出来的文档流位置。
<style> .parent{width:800px; height:400px; border:10px solid blue;} .box1{float:left; width:250px; height:80px; background-color:#ed7d31;} .box2{float:left; width:400px; height:100px; background-color:#70ad47;} .box3{width:200px; height:200px; background-color:#7030a0;} </style> <div class="parent"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div>
-
box1 box2 box3都浮动
box1 box2 box3都脱离原来的文档流,水平排布,但是因为父级宽度不够,所以box3换行显示。
<style> .parent{width:800px; height:400px; border:10px solid blue;} .box1{float:left; width:250px; height:80px; background-color:#ed7d31;} .box2{float:left; width:400px; height:100px; background-color:#70ad47;} .box3{float:left; width:200px; height:200px; background-color:#7030a0;} </style> <div class="parent"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div>
-
box1 box2 box3都浮动,box1高度比box2高
同上box3会换行显示,但是在过程中会被box1“卡住”。
<style> .parent{width:800px; height:400px; border:10px solid blue;} .box1{float:left; width:250px; height:100px; background-color:#ed7d31;} .box2{float:left; width:400px; height:80px; background-color:#70ad47;} .box3{float:left; width:200px; height:200px; background-color:#7030a0;} </style> <div class="parent"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div>
-
box1 box2向右浮动,box3 box4向左浮动
各自按照对应的方向排列。
<style> .parent{width:800px; height:400px; border:10px solid blue;} .box1{float:right; width:150px; height:100px; background-color:#ed7d31;} .box2{float:right; width:150px; height:80px; background-color:#70ad47;} .box3{float:left; width:150px; height:200px; background-color:#7030a0;} .box4{float:left; width:150px; height:150px; background-color: #9293a3;} </style> <div class="parent"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> </div>
-
图文环绕
不给img加浮动情况下,图片的底端会与第一行文字的底端对齐。给img加浮动之后,可以实现图文环绕的布局效果。
<style> .parent{width:435px; height:400px; border:10px solid blue;} img{float: left;} </style> <div class="parent"> <img src="http://static.zzhitong.com/lesson-files/html/img/9-10.jpg" height="210" alt=""> 豫章故郡,洪都新府。星分翼轸,地接衡庐。襟三江而带五湖,控蛮荆而引瓯越。物华天宝,龙光射牛斗之墟;人杰地灵,徐孺下陈蕃之榻。雄州雾列,俊采星驰。台隍枕夷夏之交,宾主尽东南之美。都督阎公之雅望,棨戟遥临;宇文新州之懿范,襜帷暂驻。十旬休假,胜友如云;千里逢迎,高朋满座。腾蛟起凤,孟学士之词宗;紫电青霜,王将军之武库。家君作宰,路出名区;童子何知,躬逢胜饯。 时维九月,序属三秋。潦水尽而寒潭清,烟光凝而暮山紫。俨骖騑于上路,访风景于崇阿;临帝子之长洲,得天人之旧馆。层峦耸翠,上出重霄;飞阁流丹,下临无地。 </div>