浮動

一.脫標的三種方式

標準流裏面的限制很是多，致使不少頁面效果沒法實現。若是咱們如今就要並排、而且就要設置寬高，那該怎麼辦呢？辦法是：移民！脫離標準流！

css中一共有三種手段，使一個元素脫離標準文檔流：

• （1）浮動
• （2）絕對定位
• （3）固定定位

二.浮動

1.設置浮動

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

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

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

浮動的四大特性：

1.浮動的元素脫標

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

2.浮動的元素互相貼靠

　　若是父元素有足夠的空間，那麼3哥緊靠着2哥，2哥緊靠着1哥，1哥靠着邊。
　　若是沒有足夠的空間，那麼就會靠着1哥，若是再沒有足夠的空間靠着1哥，本身往邊靠

3.浮動的元素有"字圍"效果

　　所謂字圍效果，當div浮動，p不浮動，div遮蓋住了p，div的層級提升，可是p中的文字不會被遮蓋，此時就造成了字圍效果。

4.收縮的效果

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

2.清除浮動

爲何要清除浮動？

在開發中，爲了提升開發效率，更好修改頁面佈局，在頁面佈局的時候，每一個結構中的父元素的高度，咱們通常不會設置。

看一個效果：

html效果：

<div class="father">    
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>

 </div>

  <div class="father2"></div>

css樣式：

 *{
            padding: 0;
            margin: 0;

        }
        .father{
            width: 1126px;
            /*子元素浮動 父盒子通常不設置高度*/

            /*出現這種問題，咱們要清除浮動帶來影響*/
            /*height: 300px;*/

        }
        .box1{
            width: 200px;
            
            height: 500px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 300px;
            height: 200px;
            float: left;
            background-color: green;
        }
        .box3{
            width: 400px;
            float: left;
            height: 100px;
            background-color: blue;
        }
        .father2{
            width: 1126px;
            height: 600px;
            background-color: purple;
        }

效果發現：若是不給父盒子一個高度，那麼浮動子元素是不會填充父盒子的高度，那麼此時.father2的盒子就會跑到第一個位置上，影響頁面佈局。

浮動元素確實能實現咱們頁面元素並排的效果，這是它的好處，同時它還帶來了頁面佈局極大的錯亂！！！因此咱們要清除浮動

清除浮動的四種方法：

　　1.給父盒子設置高度

　　　　使用不靈活，通常會經常使用頁面中固定高度的，而且子元素並排顯示的佈局。好比：導航欄

　　2.clear:both   內牆法 清除別人對個人浮動影響

 

　　　　有三個值：

　　　　　　left：當前元素左邊不容許有浮動元素

　　　　　　right：當前元素右邊不容許有浮動元素

　　　　　　both：當前元素左右兩邊不容許有浮動元素

　　　　　　給浮動元素的後面加一個空的div，而且該元素不浮動，而後設置clear：both。

 

　　3.僞元素清除法（經常使用）

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

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

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

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

　　4.overflow：hidden

overflow屬性規定當內容溢出元素框時發生的事情。

說明：

這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。所以，有可能即便元素框中能夠放下全部內容也會出現滾動條。

有五個值

值	描述
visible	默認值。內容不會被修剪，會呈如今元素框以外。
hidden	內容會被修剪，而且其他內容是不可見的。
scroll	內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto	若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

 

逐漸演變成overflow：hidden清除法。

其實它是一個BFC區域: http://www.javashuo.com/article/p-ezyacvwn-v.html