<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css浮动布局:两个属性(float:left)和(clear: both)弄明白任务完成!</title> <style> #float{ float:left; } #float1{ float:right; } .jl{ width:100px; height:100px; float:left; } .clearp{ clear: left; } #jl1{ width: 100px; height: 100px; } div{ width:500px; } </style> </head> <body> <div> <img id="jl1" src="剑灵壁纸.jpg"> <p>不换行剑灵壁纸美如画</p> <p>不换行剑灵壁纸美如画</p> <p>不换行剑灵壁纸美如画</p> </div><br><br><br><br><br> <div> <img class="jl" src="剑灵壁纸.jpg"> <p>换行剑灵壁纸美如画</p> <p>换行剑灵壁纸美如画</p> <p>换行剑灵壁纸美如画</p> </div><br><br><br><br><br> <div> <img class="jl" src="剑灵壁纸.jpg"> <p class="clearp">换行剑灵壁纸美如画</p> <p class="clearp">换行剑灵壁纸美如画</p> <p class="clearp">换行剑灵壁纸美如画</p> </div><br><br><br><br> <div>正常文字1</div> <div>正常文字2</div> <div id="float">浮动文字</div> <div id="float1">浮动文字</div> <div>正常文字3</div> <div>正常文字4</div> </body>` </html>
css浮动布局:两个重要属性(float:left)和(clear: both)练习
最新推荐文章于 2022-08-01 17:00:00 发布