WEB前端 | HTML基礎——(3)a標籤、隱藏及浮動
阿新 • • 發佈：2019-02-11
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>浮動</title> <style type="text/css"> .div1,.div2,.div3,.div4 { width: 200px; height: 200px; } .div1 { background-color: blue; /*float: right;*/ } .div2 { background-color: red; float: left; } .div3 { width: 300px; height: 300px; background-color: green; /*float: left;*/ } .div4 { background-color: yellow; /*float: right;*/ } /*清除浮動：修復浮動元素的父級檢測不到內容而導致高度變為0帶來的影響 1、手動給父級高度（不靈活，最次的） 2、給浮動元素的父級 設定overflow:hidden;(簡潔常見，但不是真正意義上的清除浮動) 3、給浮動元素的同級新增一個標籤，設定這個標籤的clear:both;屬性 浮動起來的塊標籤，寬度預設為內容決定image 浮動起來的行標籤可以設定寬高、margin-top */ .firstdiv { width: 200px; height: 200px; background-color: red; float: left; /*margin-top: 50px;*/ } .seconddiv { width: 300px; /*height: 200px;*/ background-color: blue; color: white; /*overflow:hidden;*/ } .clear { /*left right both*/ clear: both; /*清除浮動元素的標籤本身不能浮動*/ /*float: left;*/ } .hangji1 { width: 200px; height: 200px; background-color: red; float: left; } .hangji2 { width: 300px; height: 300px; background-color: blue; /*float: left;*/ } .hangji3 { width: 200px; height: 200px; background-color: green; float: left; margin: 50px; } .hangji4 { width: 200px; height: 200px; background-color: yellow; float: left; margin-top:200px; } </style> </head> <body> <!-- <div class="div1">我是div1</div> <div class="div2">我是div2</div> <div class="div3">我是div3</div> <div class="div4">我是div4</div> --> <!-- <div class="seconddiv"> <div class="firstdiv"></div> <div class="clear"></div> </div> --> <span class="hangji1">1</span> <span class="hangji2">2</span> <span class="hangji3">3</span> <span class="hangji4">4</span> <div>1</div> </body> </html>