float:left 左浮動
float:right 右浮動
float:none 不浮動
float:inherit 繼承浮動(繼承父元素浮動屬性，如果父元素無浮動屬性，inherit失效)
浮動產生哪些問題：1.父元素塌陷，沒有高度。2.網頁中的臨近元素出現異位
清除浮動的幾種方法：
1.手動給父元素添加高度 缺點：如果子項目過多且數量不確定，設定較為複雜。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>清除浮動</title> <style type="text/css"> /*給父級元素添加高度 */ *{ padding:0; margin:0; } .news { background-color: red; border: solid 1px black; height:200px; /*設定高度，如果去掉高度元素塌陷*/ } .news img { float: left; } .news p { float: right; } </style></head><body> <div> <img src="1.jpg" /> <p>some text</p> </div></body></html>
2.用clear屬性
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>清除浮動</title> <style type="text/css"> /* 清除浮動 clear*/ *{ margin:0; padding:0; }.news { background-color: red; border: solid 1px black; }.news img { float: left; }.news p { float: right; } .content{ clear:both;/*兩邊都清除浮動*/ } </style></head><body> <div><img src="1.jpg" /><p>some text</p><div></div></div></body></html>
3.給父元素添加overflow屬性並結合zoom:1使用
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>清除浮動</title> <style type="text/css"> /* 給父級元素添加overflow:hidden; */ *{ margin:0; padding: 0; } .news { background-color: red; border: solid 1px black; overflow: hidden; /*溢出隱藏*/ zoom:1;/*相容IE瀏覽器*/ }.news img { float: left; }.news p { float: right; } </style></head><body> <div> <img src="1.jpg" /> <p>some text</p></div></body></html>
4.給父級元素添加浮動 缺點：相鄰元素位置異常
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>清除浮動</title> <style type="text/css"> /* 給父級元素添加浮動 */ *{ margin:0; padding:0; } .news { background-color: red; border: solid 1px black; float: left; /* 給父級元素添加浮動 */ }.news img { float: left; }.news p { float: right; } </style></head><body> <div> <img src="1.jpg" /> <p>some text</p></div></body></html>
5.使用:after虛擬元素
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>清除浮動</title> <style type="text/css"> /* 使用虛擬元素：after添加浮動 */ *{ margin:0; padding:0; } .news { background-color: red; border: solid 1px black; }.news img { float: left; }.news p { float: right; } .clearfix:after{ content: "\0020";/*在父容器的結尾處放一個空白字元*/ display: block; height: 0; /*讓這個空白字元不顯示出來*/ clear: both; } /* 相容IE6和IE7,觸發haslayout */ .clearfix{ zoom:1; } </style></head><body> <div class="news clearfix"> <img src="1.jpg" /> <p>some text</p></div></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
