清除浮動

浮動是css裏面佈局最多的一個屬性，也是很重要的一個屬性。

1. float：表示浮動的意思。它有四個值。

• none: 表示不浮動，默認
• left: 表示左浮動
• right：表示右浮動

　　看一個例子

　　　　html結構：

 <div class="box1"></div>
 <div class="box2"></div>
 <span>路飛學城</span>
css樣式
.box1{
     width: 300px;
     height: 300px;
     background-color: red;
     float:left;
  }
 .box2{
     width: 400px;
     height: 400px;
     background-color: green;
     float:right;
   }
   span{
     float: left;
     width: 100px;
     height: 200px;
     background-color: yellow;
    }

　　咱們會發現，三個元素並排顯示，.box1和span由於是左浮動，緊挨在一塊兒，這種現象貼邊。.box2盒子由於右浮動，因此緊靠着右邊。

　　那麼浮動若是你們想學好，必定要知道它的四大特性

　　　　　　　　1.浮動的元素脫標

　　　　　　　　2.浮動的元素互相貼靠

　　　　　　　　3.浮動的元素由"子圍"效果

　　　　　　　　4.收縮的效果

浮動元素脫標

<div class="box1">小紅</div>
     <div class="box2">小黃</div>
     <span>小馬哥</span>
     <span>小馬哥</span>

        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        
        }
        span{
            background-color: green;
            float: left;
            width: 300px;
            height: 50px;
        }

　　效果：紅色盒子壓蓋住了黃色的盒子，一個行內的span標籤居然可以設置寬高了。

　　緣由1：小紅設置了浮動，小黃沒有設置浮動，小紅脫離了標準文檔流，其實就是它不在頁面中佔位置了，此時瀏覽器認爲小黃是標準文檔流中的第一個盒子。因此就渲染到了頁面中的第一個位置上。這種現象，也有一種叫法，浮動元素「飄起來了」，但我不建議你們這樣叫。

　　緣由2：全部的標籤一旦設置浮動，就可以並排，而且都不區分行內、塊狀元素，都可以設置寬高

浮動元素互相貼靠

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    .box1{
            width: 100px;
            height: 400px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 150px;       
            height: 450px;
            float: left;
            background-color: yellow;
        }
        .box3{
            width: 300px;
            height: 300px;
            float: left;
            background-color: green;
        }

浮動元素字圍效果:

浮動元素緊湊效果

　　收縮：一個浮動元素。若是沒有設置width，那麼就自動收縮爲文字的寬度（這點跟行內元素很像）

你們必定要謹記：關於浮動，咱們初期必定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一塊兒浮動。另外，有浮動，必定要清除浮動，

2. 爲何要清除浮動

　　還好還好。咱們有多種清除浮動的方法，在這裏給你們介紹四種：

1. 1. 給父盒子設置高度
   2. clear:both
   3. 僞元素清除法
   4. overflow：hidden

　　給父盒子設置高度:

　　　　這個方法給你們上個代碼介紹，它的使用不靈活，通常會經常使用頁面中固定高度的，而且子元素並排顯示的佈局。好比：導航欄

　　僞元素清除法:

　　　　給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，而後設置

.clearfix:after{ 
/*必需要寫這三句話*/
 content: '.';
 clear: both; 
display: block; }

　　　　新浪首頁推薦僞元素清除法的寫法

/*新浪首頁清除浮動僞元素方法*/ 
content: ".";
 display: block;
 height: 0; clear: both;
 visibility: hidden

 bfc:          http://www.javashuo.com/article/p-ezyacvwn-v.html