Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>5.浮动原理</title> <style type="text/css"> .text { background-color: yellow; width: 200px; height: 200px; float: left; } .box1 { background-color: blue; width: 200px; height: 200px; float: left; }.box2 { background-color: coral; width: 200px; height: 200px; float: left; }.box3 { background-color: green; width: 200px; height: 200px; float: right; } </style> </head> <body><!-- 浮动与绝对定位 相同之处:元素都脱离了文档流,任何元素浮动之后都变成了块元素,都支持宽高,span特点:浮动总是沿着碎屏方向 --> <span class="text">PHP中文网</span> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
点击 "运行实例" 按钮查看在线实例