css_oneday

?css

css概述：

css全稱Cascading?Style?Sheets?：層疊樣式表，用于控制網頁的樣式和布局。

css的四種引入方式

1.行內式

行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。

<body><p style="background-color: chartreuse">hello laiying</p>
</body>

?2.嵌入式

嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{
 8             background-color: gold;
 9         }
10     </style>
11 </head>
12 <body>
13      <p>hello world</p>
14     <!--<p style="background-color: chartreuse">hello laiying</p>-->
15 </body>
16 </html>

3.鏈接式

將一個.css文件引入到HTML文件中，工作中常用。

4.導入式

將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下： ? ??

注意：

? ? ? 導入式會在整個網頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之后，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點。

?二.css選擇器（seletcor）

?1.基礎選擇器

1 ＊ ：           通用元素選擇器，匹配任何元素                    * { margin:0; padding:0; }
2 
3 E  ：          標簽選擇器，匹配所有使用E標簽的元素               p { color:green; }
4 
5 .info和E.info: class選擇器，匹配所有class屬性中包含info的元素   .info { background:#ff0; }    p.info { background:blue; }
6 
7 #info和E#info  id選擇器，匹配所有id屬性等于footer的元素         #info { background:#ff0; }   p#info { background:#ff0; }

2.組合選擇器

1 E,F         多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔         div,p { color:#f00; }
2 
3  E F         后代元素選擇器，匹配所有屬于E元素后代的F元素，E和F之間用空格分隔    li a { font-weight:bold;
4  E > F       子元素選擇器，匹配所有E元素的子元素F                            div > p { color:#f00; }
5  
6  E + F       毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F                  div + p { color:#f00; }

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         .div1>p{
 9             background-color: aqua;
10             color: deeppink;
11         }
12 
13         .main2>div{
14             background-color: blueviolet;
15             color: chartreuse;
16         }
17     </style>
18 </head>
19 <body>
20 
21       <div class="div1">hello1
22           <div class="div2">hello2
23               <div>hello4</div>
24               <p>hello5</p>
25           </div>
26           <p>hello3</p>
27       </div>
28       <p>hello6</p>
29 
30 <hr>
31 
32      <div class="main2">1
33        <div>2
34            <div>
35            </div>
36        </div>
37        <div>
38            </div>
39      </div>
40 </body>
41 </html>

View Code

注意嵌套規則：

塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
li內可以包含div
塊級元素與塊級元素并列、內聯元素與內聯元素并列。

3.屬性選擇器

 1 E[att]         匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
 2 
 3  
 4  E[att=val]     匹配所有att屬性等于“val”的E元素                                 div[class=”error”] { color:#f00; }
 5 
 6  
 7  E[att~=val]    匹配所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素      td[class~=”name”] { color:#f00; }
 8 
 9  E[attr^=val]    匹配屬性值以指定值開頭的每個元素                     div[class^="test"]{background:#ffff00;}
10 
11  E[attr$=val]    匹配屬性值以指定值結尾的每個元素                     div[class$="test"]{background:#ffff00;}
12 
13  E[attr*=val]    匹配屬性值中包含指定值的每個元素                     div[class*="test"]{background:#ffff00;}

4.偽類

CSS偽類是用來給選擇器添加一些特殊效果。

anchor偽類：專用于控制鏈接的顯示效果

 1 a:link（沒有接觸過的鏈接）,用于定義了鏈接的常規狀態。
 2 
 3 a:hover（鼠標放在鏈接上的狀態）,用于產生視覺效果。
 4 
 5 a:visited（訪問過的鏈接）,用于閱讀文章，能清楚的判斷已經訪問過的鏈接。
 6 
 7 a:active（在鏈接上按下鼠標時的狀態）,用于表現鼠標按下時的鏈接狀態。
 8 
 9 偽類選擇器 : 偽類指的是標簽的不同狀態:
10 
11            a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
12 
13 a:link {color: #FF0000} /* 未訪問的鏈接 */
14 
15 a:visited {color: #00FF00} /* 已訪問的鏈接 */
16 
17 a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
18 
19 a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; }

 1 <style type="text/css">
 2     a:link{
 3         color: red;
 4     }
 5     a:visited {
 6         color: blue;
 7     }
 8     a:hover {
 9         color: green;
10     }
11     a:active {
12         color: yellow;
13     }
14 </style>
15 </head>
16 <body>
17     <a href="https://www.baidu.com">我是超鏈接</a>
18 </body>
19 </html>

before after偽類

:before    p:before       在每個<p>元素之前插入內容
:after     p:after        在每個<p>元素之后插入內容p:before        在每個 <p> 元素的內容之前插入內容                    p:before{content:"hello";color:red}p:after         在每個 <p> 元素的內容之前插入內容                    p:after{ content:"hello"；color:red}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hello:after{
 8             content: "python";
 9             color: coral;
10         }
11         .taobao:before{
12             content: "歡迎登陸淘寶";
13             color: red;
14         }
15 
16     </style>
17 </head>
18 <body>
19 
20     <p  class="hello">hello workd </p>
21     <p class="taobao">www.taobao.com</p>
22 </body>
23 </html>

5.css優先級和繼承

CSS優先級:即是指CSS樣式在瀏覽器中被解析的先后順序。

1 樣式表中的特殊性描述了不同規則的相對權重，優先級如下（又高到低）
2 內聯樣式表
3 id屬性
4 class類屬性
5 html標簽
　繼承
6 如果優先級相同，后設置的會覆蓋前面設置的

CSS的繼承性:

繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的后代。例如一個BODY定義了的顏色值也會應用到段落的文本中。

1 body{color:red;}       
2 <p>helloyuan</p>

這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。

1 p{color:green}

發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見：任何顯示申明的規則都可以覆蓋其繼承樣式。　

? ? ? 此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

1 1、文內的樣式優先級為1,0,0,0，所以始終高于外部定義。這里文內樣式指形如<div style="color:red>blah</div>的樣式，而外部定義指經由<link>或<style>卷標定義的規則。
2 
3 2、有!important聲明的規則高于一切。
4 
5 3、如果!important聲明沖突，則比較優先權。
6 
7 4、如果優先權一樣，則按照在源碼中出現的順序決定，后來者居上。
8 
9 5、由繼承而得到的樣式沒有specificity的計算，它低于一切其它規則(比如全局選擇符*定義的規則)。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         #he{
 9             background-color: red;
10         }
11         .hello{
12             background-color: aqua !important;
13         }
14         
15 
16     </style>
17 </head>
18 <body>
19     <p id="he" class="hello">hello workd </p>
20 </body>
21 </html>

三.css的常用屬性。

1.顏色屬性。

1 <div style="color:blueviolet">ppppp</div>
2 <div style="color:#ffee33">ppppp</div>
3 <div style="color:rgb(255,0,0)">ppppp</div>
4 <div style="color:rgba(255,0,0,0.5)">ppppp</div>

2.字體屬性。

font-size: 20px/50%/larger #設置字體大小
font-family:'Lucida Bright' #設置字體樣式，如宋體，羅馬字體等
font-weight: lighter/bold/border／  #設置字體寬度

3.背景屬性。

 1 background-color: cornflowerblue  # 背景顏色
 2 
 3 background-image: url('1.jpg');  # 背景圖片
 4 
 5 background-repeat: no-repeat;(repeat:平鋪滿)
 6 
 7 background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)
 8 
 9       簡寫：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
10 
11               <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

注意：如果將背景屬性加在body上，要記得給body加上一個height，否則結果異常，這是因為body為空，無法撐起背景圖片；另外，如果此時要設置一個width＝100px，你也看不出效果，除非你設置出html。 ??

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         html{
 8             background-color: antiquewhite;
 9             
10         }
11         body{
12             width: 100px;
13             height: 600px;
14             background-color: deeppink;
15             background-image: url(1.jpg);
16             background-repeat: no-repeat;
17             background-position: center center;
18         }
19     </style>
20 </head>
21 <body>
22 
23 </body>
24 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8 
 9         span{
10             display: inline-block;  #將內聯標簽設置為塊級標簽，inline內聯標簽
11             width: 18px;
12             height: 20px;
13             background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
14             background-position: 0 -100px;
15         }
16     </style>
17 </head>
18 <body>
19 
20 
21     <span></span>
22 
23 </body>
24 </html>

4.文本屬性

 1 font-size: 10px;
 2 
 3 text-align: center;   橫向排列
 4 
 5 line-height: 200px;   文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基于字體大小的百分比
 6 
 7 vertical-align:－4px  設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效
 8 
 9 
10 text-indent: 150px;   首行縮進
11 letter-spacing: 10px;  字符間距
12 word-spacing: 20px;  單詞間距
13 text-transform: capitalize;  改變文本，如首字母大寫

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .div-1{
 8             background-color: coral;
 9             width: 100px;
10             height: 100px;
11             font-size: 10px;
12             text-align: center;
13             line-height: 100px;
14             letter-spacing: 2px;
15             word-spacing: 5px;
16             text-transform: capitalize;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="div-1">hello world</div>
22 </body>
23 </html>

5.邊框屬性

1 border-style: solid;   #邊框樣式，如實線，虛線等
2 border-color: chartreuse;  # 邊框顏色
3 border-width: 20px;  # 邊框寬度
4 簡寫：border: 30px rebeccapurple solid;

邊框屬性：border_radius box-shadow border-image

?border-radius：屬性用于創建圓角

box-shadow:向方框添加陰影

border-image：使用圖片來創建邊框

dashed 虛線

瀏覽器支持

Internet Explorer 9+ 支持 border-radius 和 box-shadow 屬性。

Firefox、Chrome 以及 Safari 支持所有新的邊框屬性。

注釋：對于 border-image，Safari 5 以及更老的版本需要前綴 -webkit-。

Opera 支持 border-radius 和 box-shadow 屬性，但是對于 border-image 需要前綴 -o-。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7        .div-1{
 8            border:10px red solid;
 9        }
10     </style>
11 </head>
12 <body>
13     <div class="div-1">hello world</div>
14 </body>
15 </html>

6.列表屬性。

1 ul,ol{   list-style: decimal-leading-zero;   #數字
2          list-style: none; <br>        
3          list-style: circle;   # 圓形
4          list-style: upper-alpha;  # 大寫字母
5          list-style: disc; }    # 圓形，實體

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         ul, ol{
 8             /*list-style: decimal-leading-zero;*/
 9             /*list-style: none;*/
10             /*list-style: upper-alpha;*/
11             /*list-style: disc;*/
12             list-style: circle;
13         }
14     </style>
15 </head>
16 <body>
17     <ul>
18         <li>無序列表第一行</li>
19         <li>無序列表第二行</li>
20     </ul>
21     <ol>
22         <li>有序列表第一行</li>
23         <li>有序列表第二行</li>
24     </ol>
25     <dl>
26         <dt style="color: coral">列表標題</dt>
27         <dd>自定義列表第一行</dd>
28         <dd>自定義列表第二行</dd>
29     </dl>
30 
31 </body>
32 </html>

7.dispaly屬性

1 none  # 不設置如何屬性
2 block # 設置為塊屬性
3 inline # 設置為內聯標簽
4 inline-block #自定義布局，擁有塊和內聯的屬性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .span1{
 8             display: block;
 9             width: 100px;
10             height: 100px;
11             background-color: aqua;
12         }
13         .span2{
14             display: block;
15             width: 100px;
16             height: 100px;
17             background-color: coral;
18         }
19         .p1,.p2{
20             display: inline;
21         }
22     </style>
23 </head>
24 <body>
25    <span class="span1"></span>
26     <span class="span2"></span>
27     <p class="p1">hello p1</p>
28     <p class="p2">hello p2</p>
29 </body>
30 </html>

8.外邊距和內邊距

 1 
　　<span style="
 2     height: 20px;   # 高度
 3     padding-bottom: 34px;  # 底部填充
 4     border-top-width: 41px;  # 上邊框
 5     margin-top: 50px;  # 上邊界
 6     margin-right: 53px;  # 右邊界
 7     margin-left: 52px;  # 左邊界
 8     margin-bottom: 54px;  # 下邊界
 9     width: 10px;   # 寬度
10     border-bottom-width: 3?;  # 下邊框
11     border-left-width: 42px;  # 左邊框
12     border-right-width: 43px;  # 右邊框
13     padding-left: 32px;  # 左邊填充
14     padding-right: 33px;  # 右邊填充
15     border-bottom-width: 44px;  # 下邊框
16 "></span>

?外邊距（margin):用于控制元素與元素之間的距離

邊框（border):盒子本身

內邊距（padding）:用于控制內容和邊框之間的距離，填充

內容（content）:盒子的內容

?元素的寬度和高度:

1 margin:10px 5px 15px 20px;-----------上 右 下 左
2 margin:10px 5px 15px;----------------上 右左 下
3 margin:10px 5px;---------------------上下  右左
4 margin:10px;    ---------------------上右下左

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin: 0;
 9         }
10         .div1{
11             width: 200px;
12             height: 100px;
13             background-color: aqua;
14             margin: 10px;
15             border: 5px deeppink solid;
16             padding: 3px;
17         }
18         .div2{
19             width: 100px;
20             height: 200px;
21             background-color: coral;
22         }
23         .div3{
24             width: 200px;
25             height: 100px;
26             background-color: royalblue;
27         }
28         .div4{
29             width: 200px;
30             height: 100px;
31             background-color: yellowgreen;
32         }
33     </style>
34 </head>
35 <body>
36 <div class="div1"></div>
37 <div class="div2"></div>
38 <div class="div3"></div>
39 <div class="div4"></div>
40 </body>
41 </html>

邊框在默認情況下會定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因為body本身也是一個盒子（外層還有html），在默認情況下， ? body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器窗口的邊框了

>>>解決方法

1 body{
2             margin: 0;
3         }

邊界塌陷或者邊界重疊（margin collapse）

外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當我們上下排列一系列規則的塊級元素（如段 ? ? 落P）時，那么塊元素之間因為外邊距重疊的存在，段落之間就不會產生雙倍的距離。又比如停車場

? ? ? ? ? ?1兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值

? ? ? ? ? ?2父子div ???

? ? ? ? ? ? ? ? ???if ?父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標簽包括border，padding，inline content ? ? ? ? ? ? ?中的其中一個，然后按此div 進行margin?；

 1 <!DOCTYPE html>
 2 <html lang="en" style="padding: 0px">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         body{
 9             margin: 0px;
10         }
11 
12         .div1{
13             background-color: aqua;
14             width: 300px;
15             height: 300px;
16         }
17         .div2{
18             background-color: blueviolet;
19             width: 100px;
20             height: 100px;
21             margin: 20px;
22         }
23     </style>
24 </head>
25 <body>
26        <div style="background-color: cadetblue;width: 300px;height: 300px"></div>
27        <div class="div1">
28            <div class="div2"></div>
29            <div class="div2"></div>
30        </div>
31 </body>
32 </html>

?解決方法

在div1中加入以下屬性
1 border:1px solid transparent    #transparent設置為透明
2 padding:1px
3 over-flow:hidden;  #隱藏文檔流

?9.float屬性

先來了解一下block元素和inline元素在文檔流中的排列方式。

　　block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性；

　　inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效。inline元素的margin和padding屬性。水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等

? ???

所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。

脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。

只有絕對定位absolute和浮動float才會脫離文檔流。

? ???---部分無視和完全無視的區別？需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍(可以說是部分無視)。而對于使用absolute position脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。(可以說是完全無視)

浮動的表現

? ? ? 定義：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流中的浮動框之后的塊框表現得就像浮動框不存在一樣。（注意這里是塊框而不是內聯元素；浮動框只對它后面的元素造成影響）

注意當初float被設計的時候就是用來完成文本環繞的效果，所以文本不會被擋住，這是float的特性，即float是一種不徹底的脫離文檔流方式。無論多么復雜的布局，其基本出發點均是：“如何在一行顯示多個div元素”。

現象1:

? ? ? 假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之后的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。?浮動的框之后的inline元素，會為這個框空出位置，然后按順序排列。

現象2:

(1)左右結構div盒子重疊現象，一般是由于相鄰兩個DIV一個使用浮動一個沒有使用浮動。如上面的例1：相鄰的兩個盒子box2向左浮動、box3未浮動。一個使用浮動一個沒有導致DIV不是在同個“平面”上，但內容不會照成覆蓋現象，只有DIV形成覆蓋現象。

解決方法：要么都不使用浮動；要么都使用float浮動；要么對沒有使用float浮動的DIV設置margin樣式。

(2)上下結構div盒子重疊現象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<style type="text/css">* {margin:0;padding:0;}.container{border:1px solid red;width:300px;}#box1{background-color:green;float:left;width:100px;height:100px;}#box2{background-color:deeppink;float:right;width:100px;height:100px;}#box3{background-color:pink;height:40px;}
</style>
</head>
<body>
body<div class="container"><div id="box1">box1 向左浮動</div><div id="box2">box2 向右浮動</div></div><div id="box3">box3</div>
</body>
</body>
</html>

例子如上：.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個原因是因為第一個大盒子里的子元素使用了浮動，脫離了文檔流，導致.container沒有被撐開。box3認為.container沒有高度（未被撐開），因此跑上去了。

解決方法：

1、要么給.container設置固定高度，一般情況下文字內容不確定多少就不能設置固定高度，所以一般不能設置“.container”高度(當然能確定內容多高，這種情況下“.container是可以設置一個高度即可解決覆蓋問題。

2、要么清除浮動。

清除浮動：

在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。

1 clear語法：
2 clear : none | left | right | both
3 取值：
4 none : 默認值。允許兩邊都可以有浮動對象
5 left : 不允許左邊有浮動對象
6 right : 不允許右邊有浮動對象
7 both : 不允許有浮動對象
8 但是需要注意的是：clear屬性只會對自身起作用，而不會影響其他元素。如果一個元素的右側有一浮動對象，而這個元素設置了不允許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。

方法一（工作中推薦使用）

 1 .clearfix:after {             <----在類名為“clearfix”的元素內最后面加入內容； 
 2 content: ".";                 <----內容為“.”就是一個英文的句號而已。也可以不寫。 
 3 display: block;               <----加入的這個元素轉換為塊級元素。 
 4 clear: both;                  <----清除左右兩邊浮動。 
 5 visibility: hidden;           <----可見度設為隱藏。注意它和display:none;是有區別的。visibility:hidden;仍然占據空間，只是看不到而已； 
 6 line-height: 0;               <----行高為0； 
 7 height: 0;                    <----高度為0； 
 8 font-size:0;                  <----字體大小為0； 
 9 } 
10 .clearfix { *zoom:1;}         <----這是針對于IE6的，因為IE6不支持:after偽類，這個神奇的zoom:1讓IE6的元素可以清除浮動來包裹內部元素。

示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 <style type="text/css">
 7          * {
 8              margin:0;
 9              padding:0;
10          }
11 
12         .container{
13             border:1px solid red;
14             width:300px;
15         }
16         .clearfix:after{ # 解決浮動溢出
17             content: "";  # 內容為空
18             clear: both;   # 清除左右兩邊浮動
19             display: block;  # 設置為塊級標簽
20         }
21         #box1{
22             background-color:green;
23             float:left;
24             width:100px;
25             height:100px;
26             /*clear: left;*/
27         }
28         #box2{
29             background-color:deeppink;
30             /*float:right;*/
31             width:100px;
32             height:100px;
33             clear: left;  # 不允許左浮動
34         }
35          #box3{
36              background-color:pink;
37              height:40px;
38          }
39 </style>
40 </head>
41 <body>
42         <div class="container clearfix">
43                 <div id="box1">box1 向左浮動</div>
44                 <div id="box2">box2 向右浮動</div>
45         </div>
46         <div id="box3">box3</div>
47 </body>
48 </html>

整段代碼就相當于在浮動元素后面跟了個寬高為0的空div，然后設定它clear:both來達到清除浮動的效果。?
之所以用它，是因為，你不必在html文件中寫入大量無意義的空標簽，又能清除浮動。?

方法二：

1 overflow:hidden;

overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明確設定包含容器高度的情況下，它要計算內容的全部高度才能確定在什么位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。

10?position(定位)

1 static

static 默認值，無定位，不能當作絕對定位的參照物，并且設置標簽對象的left、top等值是不起作用的的。

2 ?position: relative／absolute

? ??relative?相對定位。相對定位是相對于該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。

注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .div1{
 8             width: 200px;
 9             height: 100px;
10             background-color: chartreuse;
11         }
12         .div2{
13             width: 200px;
14             height: 100px;
15             background-color: coral;
16             position: relative;  #相對定位，已自己本身的位置為參照物
17             top:10px; #先上移動10像素
18             left: 30px;  #先左移動30像素
19 
20         }
21         .div3{
22             width: 200px;
23             height: 100px;
24             background-color: hotpink;
25         }
26         .div4{
27             width: 200px;
28             height: 100px;
29             background-color: darkorchid;
30         }
31     </style>
32 
33 </head>
34 <body>
35     <div class="div1"></div>
36     <div class="div2"></div>
37     <div class="div3"></div>
38     <div class="div4"></div>
39 </body>
40 </html>

absolute?絕對定位。

? ? ? 定義：設置為絕對定位的元素框從文檔流完全刪除，并相對于最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

重點：如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。

? ? ? 另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。

總結：參照物用相對定位，子元素用絕對定位，并且保證相對定位參照物不會偏移即可。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             position: relative;  # 將父級設置為相對定位
 9         }
10         .div1{
11             width: 200px;
12             height: 100px;
13             background-color: chartreuse;
14         }
15         .div2{
16             width: 200px;
17             height: 100px;
18             background-color: coral;
19             position: absolute;  # 設置為絕對定位，已父級容器為參照物
20             top:10px;
21             left: 30px;
22 
23         }
24         .div3{
25             width: 200px;
26             height: 100px;
27             background-color: hotpink;
28         }
29         .div4{
30             width: 200px;
31             height: 100px;
32             background-color: darkorchid;
33         }
34     </style>
35 
36 </head>
37 <body>
38     <div style="width: 200px; height: 200px; background-color: antiquewhite"></div>
39     <div class="div">
40         <div class="div1"></div>
41         <div class="div2"></div>
42         <div class="div3"></div>
43         <div class="div4"></div>
44     </div>
45 </body>
46 </html>

3 ?position:fixed（以窗口為參照物）

? ? ? ? fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性定義。注意點：一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。

? ? ? ?在理論上，被設置為fixed的元素會被定位于瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             position: relative;
 9         }
10         .div1{
11             width: 200px;
12             height: 100px;
13             background-color: chartreuse;
14         }
15         .div2{
16             width: 200px;
17             height: 100px;
18             background-color: coral;
19             position: absolute;
20             top:10px;
21             left: 30px;
22 
23         }
24         .div3{
25             width: 200px;
26             height: 100px;
27             background-color: hotpink;
28         }
29         .div4{
30             width: 200px;
31             height: 100px;
32             background-color: darkorchid;
33         }
34         .rentutop{
35             width: 65px;
36             height: 20px;
37             position: fixed;  #固定定位
38             background-color: cadetblue;
39             color: white;
40             bottom: 40px;
41             right: 40px;
42         }
43     </style>
44 
45 </head>
46 <body>
47     <div style="width: 200px; height: 200px; background-color: antiquewhite"></div>
48     <div class="div">
49         <div class="div1"></div>
50         <div class="div2"></div>
51         <div class="div3"></div>
52         <div class="div4"></div>
53     </div>
54     <div style="width: 1000px; height: 1000px; background-color: chartreuse"></div>
55     <div class="rentutop">返回頂部</div>
56 </body>
57 </html>

4?僅使用margin屬性布局絕對定位元素（脫離文檔流，與position: relative相識，都以自己為參照物，不同點就是已脫離文檔流

）此情況，margin-bottom 和margin-right的值不再對文檔流中的元素產生影響，因為該元素已經脫離了文檔流。另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。 ?

　　圖9中，使用margin屬性布局相對定位元素。
　　層級關系為：
　　<div ——————————— position:relative;
　　<div—————————-沒有設置為定位元素，不是參照物
　　<div———————-沒有設置為定位元素，不是參照物
　　<div box1
　　<div box2 ——–position:absolute;?margin-top:50px; margin-left:120px;
　　<div box3
　　效果圖：