html中float浮動與margin的結合使用
阿新 • • 發佈：2021-11-09
1：
如圖先設計一個大布局容器，在裡面再設計兩個div小面積的容器，這樣更直觀的說明浮動佈局。
<style type="text/css"> #da{ width: 200px; height: 200px; border: 3px solid red; } #xiao1{ width: 50px; height: 50px; background: lightblue; } #xiao2{ width: 50px; height: 50px; background: yellow; } </style> </head> <body> <div id="da"> <div id="xiao1"></div> <div id="xiao2"></div> </div> </body>
2：
如圖以上程式碼為預設佈局，接下來我們用浮動來控制它們的位置。
給小xiao1新增左浮動，xiao2新增右浮動。
程式碼如圖所示：
<style type="text/css"> #da{ width: 200px; height: 200px; border: 3px solid red; } #xiao1{ width: 50px; height: 50px; background: lightblue; float: left; } #xiao2{ width: 50px; height: 50px; background: yellow; float: right; } </style> </head> <body> <div id="da"> <div id="xiao1"></div> <div id="xiao2"></div> </div> </body>
3:
接下來用margin使兩個xiao佈局不緊貼da佈局。
程式碼如下圖所示：
<style type="text/css"> #da{ width: 200px; height: 200px; border: 3px solid red; } #xiao1{ width: 50px; height: 50px; background: lightblue; float: left; margin: 10px 0 0 20px; } #xiao2{ width: 50px; height: 50px; background: yellow; float: right; margin: 10px 20px 0 0; } </style> </head> <body> <div id="da"> <div id="xiao1"></div> <div id="xiao2"></div> </div> </body>