1.浮動float
div配合float浮動來做頁面的布局，浮動最常用的地方就是用來做布局。只有一個標簽設置了浮動float屬性，就會變成塊級標簽。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>10float頁面布局示例</title> <style> * { margin: 0px; padding: 0px; } .c1 { height: 1000px; width: 20%; background-color: darkslategrey; float: left; /* 使用浮動屬性，將div1和div2兩個塊級標簽橫向推擠在一起。如果兩個標簽能夠擺在一排，就會浮動到一起 */ } .c2 { height: 1000px; width: 80%; background-color: black; float: left; } </style> </head> <body> <!-- 設置一個div占用屏幕左側的百分20，一個div占屏幕右側的百分之80 --> <div class="c1"></div> <div class="c2"></div> </body> </html>
2.清除浮動clear屬性
（1）利用偽元素具有clear清除浮動的屬性來解決父標簽塌陷的問題（父標簽撐不起來的問題）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>11清除浮動示例</title> <style> /* 通用樣式將整個瀏覽器的外邊距與內邊距設置為0 */ * { margin: 0; padding: 0; } #d1 { border: 1px solid black; } .c1, .c2 { float: left; /* 左浮動 */ height: 100px; } /*.c3 {*/ /*!*height: 100px;*!*/ /*clear: left;*/ /*}*/ /* 在d1這個標簽的最后加一個偽元素,偽元素的內容為空，但具有清除浮動的屬性，解決了父標簽塌陷問題*/ #d1:after { content: ""; clear: left; display: block; } </style> </head> <body> <div id="d1"> <div class="c1">c1</div> <div class="c2">c2</div> </div> </body> </html>
3.overflow溢出屬性
（1）利用overflow溢出屬性做圓形頭像的例子
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>12overflow示例</title> <style> .c1 { width: 120px; height: 120px; border: 1px solid black; /*overflow: scroll; !* 當內容溢出時，則會使用滾動條，防止內容溢出 *!*/ overflow: auto; /* 同樣是增加了滾動條來防止溢出*/ } /* 使頭像變成圓形的例子 */ .header-img { width: 120px; height: 120px; border: 2px solid #FF0000; border-radius: 100%; /* 圓形邊框 */ overflow: hidden; /* 如果內容溢出了則隱藏掉溢出的部分 */ } img { max-width: 100%; /* 設置圖片的最大寬度為100%，也就是和父標簽一樣大 */ } </style> </head> <body> <!-- 由於文本內容過多，文本內容超過了父標簽的長和高，則發生內容了溢出 --> <div class="c1">海燕啊，你可長點心吧燕啊，你可長點心吧。燕啊，你可長點心吧。燕啊，你可長點心吧。燕啊，你可長點心吧。。</div> <!-- 利用overflow溢出的屬性來完成圓形的頭像，設置好了父標簽的大小，在父標簽里用一個字標簽設置圖片，子標簽的圖片比父標簽大的話，則利用子標簽的max-width: 100%來解決，圓形利用父標簽的溢出屬性解決 --> <div class="header-img"> <img src="huluwa.png" alt=""> </div> </body> </html>
4.清除浮動示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>float下午版</title> <style> #d1 { border: 1px solid black; } .c1 { height: 50px; width: 50px; background-color: blue; border: 1px solid red; float: left; /* 增加左浮動屬性 */ } /* 清除浮動的副作用，高度不會跑了 */ /*.c2 {*/ /*background-color: darkslategrey;*/ /*clear: left; !* 清除左浮動，有了這句話就可以讓d1標簽撐起來了，左邊不能有浮動的元素 *!*/ /*}*/ /* 另外一種清除浮動副作用的方法 */ /*#d1:after {*/ /*content: '';*/ /*clear: both;*/ /*display: block;*/ /*}*/ /* 使用類樣式進行清除浮動,之后只要需要清除浮動，標簽都可以使用這個樣式 */ .clearfix:after { content: ''; clear: both; display: block; } </style> </head> <body> <div id="d1" class="clearfix"> <div class="c1"></div> <!-- c1的浮動屬性會導致d1這個父標簽的高度撐不起來 --> <div class="c1"></div> <div class="c1"></div> <div class="c1"></div> <div class="c2"></div> </div> <div class="c3">我是解葯</div> </body> </html>
