你不知道的css浮動(dòng)

什么是浮動(dòng)

浮動(dòng)是元素在頁面中的一種定位方式，在css中用float表示，它有兩個(gè)值為：left、right，這個(gè)屬性產(chǎn)生的原本不是用來做布局的，而是用來做文字環(huán)繞的，但是后來人們發(fā)現(xiàn)做布局也不錯(cuò)，因此將其用來做布局，甚至忘記用它來做文字環(huán)繞。

浮動(dòng)的效果

1、浮動(dòng)定位的元素會(huì)被排除在文檔流之外——脫離文檔流（不占據(jù)頁面空間），其余的元素要上前補(bǔ)位
例一： 當(dāng)前面的元素設(shè)置為float:left后，該元素脫離了整個(gè)文檔流，導(dǎo)致后面元素上前補(bǔ)位

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .floatDiv{
            height: 100px;
            width: 100px;
            background: red;
            float: left;
        }
        .nextDiv{
            width: 150px;
            height: 150px;
            background: green;
        }


    </style>
</head>
<body>
    <div class="floatDiv"></div>
    <div class="nextDiv"></div>
</body>
</html>

頁面顯示效果

2、浮動(dòng)元素會(huì)停靠在父元素的左邊或者右邊，或者停靠在其他已浮動(dòng)元素的邊緣上（元素只能在當(dāng)前所在的行進(jìn)行浮動(dòng)）
例二: 子元素childDiv設(shè)置左浮動(dòng)后它?？吭诟冈氐淖筮叄琻extDiv2設(shè)置了左浮動(dòng)后，它停靠在已設(shè)置浮動(dòng)的nextDiv1的邊緣上

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .floatDiv{
            height: 150px;
            width: 150px;
            background: red;
            
        }
        .childDiv{
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
        .nextDiv1{
            width: 100px;
            height: 100px;
            background: blue;
            float: left;
        }
        .nextDiv2{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }


    </style>
</head>
<body>
    <div class="floatDiv">
        floatDiv
        <div class="childDiv">childDiv</div>
    </div>
    <hr style="margin:10px 0px;">
    <div class="nextDiv1">nextDiv1</div>
    <div class="nextDiv2">nextDiv2</div>
    
</body>
</html>

瀏覽器顯示效果

3、浮動(dòng)元素依然位于父元素之內(nèi)（如例二所示）
4、使用浮動(dòng)可以是多個(gè)塊級(jí)元素在一行內(nèi)顯示
例三：設(shè)置li元素浮動(dòng)，可以將li排成一行

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{
        overflow: hidden;
        }
        ul>li{
            display: inline;
            width: 100px;
            height: 100px;
            background: #fff;
            overflow: hidden;
            box-shadow: 2px 2px 5px rgba(0,0,0,.2);
            float: left;
            margin-right: 15px;
            margin-bottom: 15px;
            position: relative;
            transition:1s all;
            margin-top: 20px;
        }
    


    </style>
</head>
<body>
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>

    </ul>
</div>
</body>
</html>

瀏覽器顯示效果

5、文本、行內(nèi)元素、行內(nèi)塊級(jí)元素采用環(huán)繞的方式來浮動(dòng)，是不會(huì)被浮動(dòng)元素壓的，會(huì)巧妙的避開浮動(dòng)元素
例四：當(dāng)圖片在被浮動(dòng)時(shí)，其他的內(nèi)容會(huì)盡可能嘗試圍繞它出現(xiàn)，如果我們改變?nèi)萜鞯拇笮』蛘邔g覽器窗口變窄，文本只是簡單的自我重排而不會(huì)碰觸到圖片。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width: 400px;
        }
        img{
            float: left;
        }
    </style>
</head>
<body>
    <img src="./fselect.png" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, quibusdam, veniam aspernatur est ratione eos maiores iste incidunt corrupti tempora ipsa error totam rerum. Cupiditate distinctio quae possimus. Totam, aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, animi illum dolores officiis ducimus aut quis id velit ipsa fuga excepturi accusamus voluptas blanditiis nostrum quod perspiciatis beatae dolor quae?</p>
</body>
</html>
瀏覽器顯示效果
像例四中這種盒子到底是如何工作的？

現(xiàn)在我們在段落的圖片之間添加額外的空白。
添加如下css: p{margin:20px}
此刻你將會(huì)發(fā)現(xiàn)在圖片和段落之間不會(huì)產(chǎn)生額外的空白

瀏覽器顯示效果

相反我們?yōu)閳D片添加：img{margin:20px;}，則會(huì)發(fā)現(xiàn)圖片和段落之間產(chǎn)生了額外的空白
為圖片添加margin

為什么增加段落的margin不會(huì)在段落和圖片之間產(chǎn)生額外的空白？這就涉及到一個(gè)段落的盒模型。
給段落加上如下代碼：p{border:1px solid #ccc; },結(jié)果如下：

給段落加上border

正如你所看到的，圖片實(shí)際上在段落盒子的里面，所示設(shè)置margin顯示在段落外面，這就是為什么在圖片和段落之間不會(huì)怎么額外的額外的空白。
如果我們想要改變這種行為，讓段落不在環(huán)繞圖片，我們則可以給段落也設(shè)置浮動(dòng)，讓段落浮動(dòng)到左邊，并且設(shè)置相應(yīng) 的寬度

瘋狂怪異的浮動(dòng)原則

通常開發(fā)人員會(huì)用浮動(dòng)來控制列表的位置，例如讓多個(gè)塊級(jí)元素行排列
例如：給li設(shè)置相同的高度，并且所有l(wèi)i左浮動(dòng)，結(jié)果展示所有l(wèi)i排列成一行，當(dāng)超出一行時(shí)，換行顯示

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{
        overflow: hidden;
        }
        ul>li{
            width: 100px;
            height: 100px;
            background: #fff;
            overflow: hidden;
            box-shadow: 2px 2px 5px rgba(0,0,0,.2);
            float: left;
            margin-right: 15px;
            margin-bottom: 15px;
            position: relative;
            transition:1s all;
            margin-top: 20px;
        }
    


    </style>
</head>
<body>
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>

    </ul>
</div>
</body>
</html>

image.png

上面例子顯示當(dāng)我們所有的li高度相同時(shí)的浮動(dòng)排列，如果我們給li設(shè)置不同的高度時(shí)，它會(huì)怎樣浮動(dòng)呢？
image.png

圖片中顯示，當(dāng)元素5高度不一致時(shí)，會(huì)發(fā)現(xiàn)元素7顯示在右邊，它不會(huì)讓自己盡可能的浮動(dòng)到左邊，如果我們?nèi)サ暨@些li的浮動(dòng)，設(shè)置li {display：inline-block;},結(jié)果顯示截然不同。
image.png

跟上面不同之處是，圖片的默認(rèn)狀態(tài)是沿著它們的底部邊緣垂直對(duì)齊，為了顯示和浮動(dòng)一樣的效果，我們設(shè)置```li{vertical-align:top;}
image.png

現(xiàn)在看起來和浮動(dòng)相似了，那么，我們設(shè)置浮動(dòng)的li元素為何沒有像這樣顯示？
事實(shí)證明，css規(guī)范列出了九條規(guī)則來規(guī)定浮動(dòng)的行為。

1、浮動(dòng)元素會(huì)被推到他的容器的邊緣
2、任何浮動(dòng)元素都會(huì)出現(xiàn)在他之前的浮動(dòng)元素的旁邊或者下方，如果元素都是左浮動(dòng)，那么第二個(gè)元素會(huì)出現(xiàn)在第一個(gè)元素的右邊，如果都是右浮動(dòng)，第二個(gè)元素會(huì)出現(xiàn)在第一個(gè)元素的左邊。
3、左浮動(dòng)的盒子不能出現(xiàn)在右浮動(dòng)盒子的右邊
4、浮動(dòng)元素不能高過他的容器的上邊緣（當(dāng)涉及到塌陷的邊距會(huì)將更復(fù)雜）
5、浮動(dòng)元素不能比前一個(gè)塊級(jí)元素或者浮動(dòng)元素高
6、浮動(dòng)元素不能高過前一行內(nèi)聯(lián)元素
7、靠著另一個(gè)浮動(dòng)元素的浮動(dòng)元素不能超過自己的父容器邊緣
8、一個(gè)浮動(dòng)的盒子必須盡可能的高的放置
9、一個(gè)左浮動(dòng)的盒子必須盡可能左的放置，一個(gè)右浮動(dòng)的盒子要盡可能的右的放置，盡可能高的位置的優(yōu)先級(jí)比左右高

根據(jù)css的規(guī)則，上面問題的原因是：當(dāng)有一個(gè)浮動(dòng)元素時(shí)，后面緊接著的浮動(dòng)元素至少要占據(jù)與之前同樣或者更多的垂直高度來打破這一行使得流動(dòng)下移。

清除浮動(dòng)的影響

1、為后面的元素設(shè)置clear:left、clear:right、clear:both
2、當(dāng)一個(gè)給點(diǎn)的元素只包含浮動(dòng)元素時(shí)會(huì)產(chǎn)生奇怪的現(xiàn)象：父元素的高度會(huì)塌陷，
例如：我們給父元素添加背景
當(dāng)未設(shè)置浮動(dòng)時(shí)顯示如下：


image.png

當(dāng)設(shè)置了浮動(dòng)后，顯示如下：


image.png

你會(huì)發(fā)現(xiàn)當(dāng)我們設(shè)置了浮動(dòng)后，導(dǎo)致父元素的高度塌陷，如何解決這種父元素高度塌陷的問題？
  • 方案一：創(chuàng)建一個(gè)跟浮動(dòng)元素同級(jí)的空元素（常常是一個(gè)div），然后給空容器設(shè)置clear:both屬性，就會(huì)解決這種高度塌陷的問題
    <div class="clearfix" style="clear:both"></div>
  • 方案二：新的解決方案是利用overflow屬性，這個(gè)屬性控制了超出其包含框邊界的內(nèi)容的功能。如果將父項(xiàng)目的overflow設(shè)置為hidden或者auto，也能解決高度坍塌。
    ul { overflow: auto;}
  • 方案三：如果子元素全部浮動(dòng)，父元素就會(huì)塌陷，所以在所有浮動(dòng)子元素后添加一個(gè)沒有浮動(dòng)元素把父元素?fù)纹饋?，這個(gè)元素找不到、不占據(jù)空間，不能讓它里面有內(nèi)容，有內(nèi)容也要隱藏
.clearfix:after{content:'.';
　　　　　　　　　　clear:both;
　　　　　　　　　　display:block;
　　　　　　　　　　height:0;
　　　　　　　　　　overflow:hidden;
　　　　　　　　　　visibility:hidden;
　　　　　　　　}
 .clearfix:after{zoom：1；}/*解決IE的問題*/
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容