浮動與清除浮動

時間 2019-11-29

標籤浮動清除简体版

原文原文鏈接

什麼是標準文檔流

宏觀的將，咱們的web頁面和ps等設計軟件有本質的區別，web 網頁的製做，是個「流」，從上而下，像「織毛衣」。而設計軟件，想往哪裏畫東西，就去哪裏畫css

標準文檔流下有哪些微觀現象？html

1.空白摺疊現象

多個空格會被合併成一個空格顯示到瀏覽器頁面中。img標籤換行寫。會發現每張圖片之間有間隙，若是在一行內寫img標籤，就解決了這個問題，可是咱們不會這樣去寫咱們的html結構。這種現象稱爲空白摺疊現象。前端

2.高矮不齊，底邊對齊

文字還有圖片大小不一，都會讓咱們頁面的元素出現高矮不齊的現象，可是在瀏覽器查看咱們的頁面總會發現底邊對齊linux

3.自動換行，一行寫不滿，換行寫

若是在一行內寫文字，文字過多，那麼瀏覽器會自動換行去顯示咱們的文字。web

浮動

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

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

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

看個栗子佈局

<div class="box1"></div>
<div class="box2"></div>
<span>路飛學城</span>

.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;
    }

View Code

咱們會發現，三個元素並排顯示，.box1和span由於是左浮動，緊挨在一塊兒，這種現象貼邊。.box2盒子由於右浮動，因此緊靠着右邊。(UI不少都是模糊了用戶的雙眼，脫離了文檔標準流，其實不在文檔中了，比如是有個盒子，我給它設置了透明色，咱們看不到它，可是它實際存在的。)spa

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

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;
        }

View Code

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

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

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

浮動元素互相貼靠

看例子

html結構

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

css樣式

.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;
        }

效果發現：

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

浮動元素字圍效果

html結構：

<div>
   <img src="./images/企業1.png" alt="">    
</div>
<p>
   123路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛
</p>

View Code

css樣式：

       *{
            padding: 0;
            margin: 0;
        }
        div{
            float: left;
        }
        p{
            background-color: #666;
        }

View Code

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

浮動元素緊湊效果

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

html結構：

<div>alex</div>

css樣式：

div{
    float: left;
    background-color: red;
}

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

爲何要清除浮動

在頁面佈局的時候，每一個結構中的父元素的高度，咱們通常不會設置。（爲何？）

你們想，若是我初版的頁面的寫完了，感受很是爽，忽然隔了一個月，老闆說頁面某一塊的區域，我要加點內容，或者我以爲圖片要縮小一下。這樣的需求在工做中很是常見的。真想打他啊。那麼此時做爲一個前端小白，確定是去每一個地方加內容，改圖片，而後修改父盒子的高度。那問題來了，這樣不影響開發效率嗎？答案是確定的。

看一個效果：

html效果：

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

</div>

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

View Code

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;
        }

View Code

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

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

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

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

給父盒子設置高度

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

clear：both

clear：意思就是清除的意思。

有三個值：

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

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

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

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

html結構：

<div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 給浮動元素最後面加一個空的div 而且該元素不浮動 ，而後設置clear:both  清除別人對個人浮動影響-->
            <!-- 內牆法 -->
            <!-- 平白無故加了div元素  結構冗餘 -->
            <div class="clear"></div>

        </ul>

</div>
<div class="box">

</div>

View Code

css樣式

*{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;

        }


        div{
            width: 400px;

        }


        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }

View Code

僞元素清除法(經常使用)

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

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

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

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

overflow:hidden(經常使用)

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

說明：

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

有五個值：

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

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

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

到此爲止。關於浮動的實現並排、清除浮動的四個用法已經介紹完畢，你們必定要熟記於心。

margin塌陷問題

當時說到了盒模型，盒模型包含着margin，爲何要在這裏說margin呢？由於元素和元素在垂直方向上margin裏面有坑。

咱們來看一個例子：

html結構：

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

css樣式：

*{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            overflow: hidden;
            border: 1px solid gray;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;}
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
        }

View Code

當給兩個標準流下兄弟盒子設置垂直方向上的margin時，那麼以較大的爲準，那麼咱們稱這種現象叫塌陷。咱們稱爲這種技巧叫「奇淫技巧」。記住這種現象，在佈局垂直方向盒子的時候主要margin的用法。

當咱們給兩個標準流下的兄弟盒子設置浮動以後，就不會出現margin塌陷的問題。

margin：0 auto;

div{
            width: 780px;
            height: 50px;
            background-color: red;
            /*水平居中盒子*/
            margin: 0px auto;
                        /*水平居中文字*/
            text-align: center;

        }

當一個div元素設置margin：0 auto;時就會居中盒子，那咱們知道margin:0 auto;表示上下外邊距離爲0，左右爲auto的距離，那麼auto是什麼意思呢？

設置margin-left:auto；咱們發現盒子儘量大的右邊有很大的距離，沒有什麼意義。當設置margin-right:auto；咱們發現盒子儘量大的左邊有很大的距離。當兩條語句並存的時候，咱們發現盒子儘量大的左右兩邊有很大的距離。此時咱們就發現盒子居中了。

另外如何給盒子設置浮動，那麼margin:0 auto失效。

使用margin：0 auto;注意點：

1.使用margin: 0 auto;水平居中盒子必須有width，要有明確width，文字水平居中使用text-align: center;

2.只有標準流下的盒子才能使用margin:0 auto;

當一個盒子浮動了，固定定位，絕對定位(後面會講)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

另外你們必定要知道margin屬性是描述兄弟盒子的關係，而padding描述的是父子盒子的關係

善於使用父親的padding，而不是margin

若是讓你們實現如圖的效果，應該有很多的同窗作不出來。

那麼咱們來看看這個案例，它的坑在哪裏？

下面這個代碼應該是你們都會去寫的代碼。

*{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .xiongda{
            width: 100px;
            height: 100px;
            background-color: orange;

            margin-top: 30px;
        }

View Code

由於父親沒有border，那麼兒子margin-top實際上踹的是「流」踹的是行,因此父親掉下來了，一旦給父親一個border發現就行了。

那麼問題來了，咱們不可能在頁面中平白無故的去給盒子加一個border，因此此時的解決方案只有一種。就是使用父親的padding。讓子盒子擠下來。

小結

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

block元素一般被現實爲獨立的一塊，獨佔一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素能夠設置width、height、margin、padding屬性；

inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效

常見的塊級元素有 div、form、table、p、pre、h1～h五、dl、ol、ul 等。
常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
所謂的文檔流，指的是元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列。

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

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

float屬性值：

一、left：左浮動 左側爲起始，從左向右排列
二、right：右浮動  右側爲起始，從右向左排列
三、none ：不浮動，默認不浮動

浮動產生的影響

浮動可使元素按指定方向排列,直到遇到父元素的邊界或另外一個浮動元素中止

浮動的特性

什麼是文檔流

可見元素在文檔中排列位置，元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列。

1.浮動會使元素脫離文檔流
2.浮動會使元素提高層級
3.浮動可使塊元素在一行排列，不設置寬高的時候，可使元素適應內容 
4.浮動可使行內元素支持寬高

浮動產生的問題

父元素不設置高度，子元素設置浮動以後，不會撐開父元素的高度,那麼此時父盒子沒有高度了。若是在次父盒子下面還有一個標準流的盒子，那麼就會影響頁面的佈局。因此咱們要解決浮動帶來的頁面佈局錯亂問題------清除浮動。

解決辦法

 1.給父元素固定高度。不靈活
 2.在浮動元素最後加一個空的塊元素，且塊元素不浮動，設置其屬性爲clear：both    結構冗餘
 3.經常使用方法：.wrap:after{
            clear: both;
            content: "";
            height: 0;
            visibility: hidden;
            display: block;
        }

4.給父盒子 添加overflow:hidden屬性

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。