css之清除地區

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

mso-bidi-font-family:Calibri;mso-bidi-theme-font:minor-latin">
Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">清除地區：在css2.1mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">中引入了一個清除地區，當為一個元素使用clearmso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">時，他的外邊距並沒有發生變化，而是這個清除地區使得元素落在了浮動元素的下面。

mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">

1 　　<style type="text/css">
2 *{margin:0;padding:0;}
3 p{border: 1px #66CC00 solid;}
4 img {
5     width:40px;
6     height:40px;
7     float:left;
8     border: 1px #66CC00 solid;
9 }
10 h3{
11     clear:both;
12     border: 1px #66CC00 solid;
13     }
14 div{padding:20px;width:400px;height:400px;}
15 </style>
16 </head>
17
18 <body>
19 <div>
20 <p>我在上面</p>
21 <img src="QQ未命名.png" />
22 <h3>我在下面</h3>
23 </div>

mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">效果：

mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">

minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">為h3mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">設定margin-topCalibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">試試：

1 h3{
2     clear:both;
3     border: 1px #66CC00 solid;
4     margin-top:30px;
5 }

Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin"> 來看看效果：

　　Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">沒有變化，Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">清除地區在起作用了，改變一下：Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">

1 h3{
2     clear:both;
3     border: 1px #66CC00 solid;
4     margin-top:60px;
5     }

Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">效果：

Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">

minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">有了16pxmso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">的間距了，我們可以理解這個marginmso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">是相對於“我在上面”計算的，其實是這個清除地區在作怪，我們可以簡單的設定一下：

1 <style type="text/css">
2 *{margin:0;padding:0;}
3 p{border: 1px #66CC00 solid;}
4 img {
5     width:40px;
6     height:40px;
7     float:left;
8     border: 1px #66CC00 solid;
9     margin-bottom:20px;
10 }
11 h3{
12     clear:both;
13     border: 1px #66CC00 solid;
14     }
15 div{padding:20px;width:400px;height:400px;}
16 </style>
17 </head>
18
19 <body>
20 <div>
21 <p>我在上面</p>
22 <img src="QQ未命名.png" />
23 <h3>我在下面</h3>
24 </div>

mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">效果：
效果理想！

minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">為浮動元素設定外邊距，而不為“我在下面”（清除元素）設定上外邊距，問題就解決了！

mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋體;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More