HTML5第七章浮動課后代碼中的浮動是指網頁元素在網頁中左右移動的效果,為了清楚呈現浮動效果的代碼,下面是該章節中的示例代碼:
<style> .container { border: 1px solid #ccc; overflow: hidden; } .box { width: 300px; height: 100px; float: left; margin-right: 10px; background-color: #f2f2f2; } </style> <div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>
代碼中,.container是一個帶有邊框的塊級容器,overflow:hidden用于清除浮動影響,.box是浮動元素,float:left使其左浮動,margin-right:10px控制其間距,background-color: #f2f2f2為元素設置背景顏色。
這段代碼的效果是將三個盒子元素并排展示,當網頁瀏覽器窗口縮小時,它們會自動換行至下一行,仍然保持在左側位置。此外,當父容器.container包含它們時,它們向左浮動而不會超出其邊界。這是浮動最基本的應用,可以通過它來設計網頁布局。