CSS必知|重點屬性float|實踐技巧|溫故知新

學海無涯，不要沉浸在知識的海洋裏，迷失本身。

要知道本身想要什麼，抓住重點，不忘初心。

這個世界上百分之20的人，掌握着百分之80的財富。

接下來一系列教程，就帶領你們抓住重點，一塊兒作那百分之20的人。

往期知識點回顧：

重點屬性-display

重點屬性-position

1、重點屬性float

       float 屬性定義元素在哪一個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素均可以浮動。浮動元素會生成一個塊級框，而不論它自己是何種元素。

left 元素向左浮動。

right 元素向右浮動。

none 默認值。元素不浮動，並會顯示在其在文本中出現的位置。

inherit 規定應該從父元素繼承 float 屬性的值。

知識重點：

元素同時設置了浮動和絕對定位，則浮動是沒有效果

定位了的元素永遠能壓住沒有定位的元素，即上面的解釋：絕對定位能壓住浮動的元素

面試題：

1. 清除浮動方法？

答案1：給父級div定義僞類：after和zoom

/*清除浮動代碼*/     
  .clearfloat:after{display:block;
                    clear:both;content:"";
                    visibility:hidden;
                    height:0}         
  .clearfloat{zoom:1}
複製代碼

而後父級元素添加clearfloat類名便可

答案2：給父級元素定義 overflow:hidden（推薦使用，缺點：不能和position配合使用，由於超出的尺寸的會被隱藏）

代碼實踐：

帶標題的圖像浮動於右側

div{
   float:right;
   width:120px;
   margin:0 0 15px 20px;
   padding:15px;
   border:1px solid black;
   text-align:center;
}
複製代碼

使段落的首字母浮動於左側

span{
    float:left;
    width:0.7em;
    font-size:400%;
    font-family:algerian,courier;
    line-height:80%;
}
複製代碼

將帶有邊框和邊界的圖像浮動於段落的右側

img {
    float:right;
    border:1px dotted black;
    margin:0px 0px 15px 20px;
}
複製代碼