浮動模型

時間  2019-11-24
標籤 浮動 模型 简体版
原文   原文鏈接

實際上在CSS中就三大模型，盒子模型、層模型、浮動模型；其中浮動模型最噁心，哈哈！css

可是浮動模型語法最簡單：就一個屬性float:可選值爲left、right；可是這個屬性能夠引起不少的問題編程

 1 <style type="text/css">
 2     *{
 3         margin:0px;
 4         padding:0px;
 5     }
 6     .wrapper{
 7         width:300px;
 8         height:300px;
 9         border: 1px solid black;
10     }
11     .content{
12         width:100px;
13         height:100px;
14         background-color:black;
15     }
16 </style>
17 </head>
18 <body>
19     <div class="wrapper">
20         <div class="content">1</div>
21         <div class="content">2</div>
22         <div class="content">3</div>
23     </div>
24 </body>
View Code

代碼正常狀況下是沒問題的，效果以下：app

若是我給裏面的div都加上浮動float:left，則代碼和效果以下所示：ide

 1 <style type="text/css">
 2     *{
 3         margin:0px;
 4         padding:0px;
 5     }
 6     .wrapper{
 7         width:300px;
 8         height:300px;
 9         border: 1px solid black;
10     }
11     .content{
12         float:left;
13         color:#fff;
14         width:100px;
15         height:100px;
16         background-color:black;
17     }
18 </style>
19 </head>
20 <body>
21     <div class="wrapper">
22         <div class="content">1</div>
23         <div class="content">2</div>
24         <div class="content">3</div>
25     </div>
26 </body>
View Code

固然若是咱們加的CSS樣式是float:right,那麼效果一、二、3就會倒過來！以下所示：spa

 1 <style type="text/css">
 2     *{
 3         margin:0px;
 4         padding:0px;
 5     }
 6     .wrapper{
 7         width:300px;
 8         height:300px;
 9         border: 1px solid black;
10     }
11     .content{
12         float:right;
13         color:#fff;
14         width:100px;
15         height:100px;
16         background-color:black;
17     }
18 </style>
19 </head>
20 <body>
21     <div class="wrapper">
22         <div class="content">1</div>
23         <div class="content">2</div>
24         <div class="content">3</div>
25     </div>
26 </body>
View Code

若是咱們多加點div，那麼效果仍是從右往左寫，以下所示：3d

 1 <style type="text/css">
 2     *{
 3         margin:0px;
 4         padding:0px;
 5     }
 6     .wrapper{
 7         width:300px;
 8         height:300px;
 9         border: 1px solid black;
10     }
11     .content{
12         float:right;
13         color:#fff;
14         width:100px;
15         height:100px;
16         background-color:black;
17     }
18 </style>
19 </head>
20 <body>
21     <div class="wrapper">
22         <div class="content">1</div>
23         <div class="content">2</div>
24         <div class="content">3</div>
25         <div class="content">4</div>
26         <div class="content">5</div>
27         <div class="content">6</div>
28         <div class="content">7</div>
29         <div class="content">8</div>
30         <div class="content">9</div>
31     </div>
32 </body>
View Code

因此float可讓標籤進行戰隊！從左到右或者從右到左！並且各個元素在戰隊的時候咱們還能夠爲這些元素設置margin-top,margin-bottom等值，以下所示：code

 1 <style type="text/css">
 2     *{
 3         margin:0px;
 4         padding:0px;
 5     }
 6     .wrapper{
 7         
 8         width:350px;
 9         height:300px;
10         border: 1px solid black;
11     }
12     .content{
13         float:left;
14         color:#fff;
15         width:100px;
16         height:100px;
17         background-color:black;
18         margin-left: 10px;
19         margin-bottom: 10px;
20     }
21 </style>
22 </head>
23 <body>
24     <div class="wrapper">
25         <div class="content">1</div>
26         <div class="content">2</div>
27         <div class="content">3</div>
28         <div class="content">4</div>
29         <div class="content">5</div>
30         <div class="content">6</div>
31         <div class="content">7</div>
32         <div class="content">8</div>
33         <div class="content">9</div>
34     </div>
35 </body>
View Code

當父級能夠容納多少個div，一行就佔幾個，若是咱們將外層調成400，不爲子div設置margin-left寬度，那麼顯然一行就能夠包含四個div子元素了！blog

再來看一段代碼和效果：ci

 1 <style type="text/css">
 2     *{
 3         margin:0px;
 4         padding:0px;
 5     }
 6     .demo1{
 7         float:left;
 8         width:100px;
 9         height:100px;
10         background-color: black;
11         opacity:0.5;
12     }
13     .demo2{
14         width:150px;
15         height:150px;
16         background-color: green;
17     }
18 </style>
19 </head>
20 <body>
21 
22     <div class="demo1">1</div>
23     <div class="demo2">2</div>
24 </body>
View Code

你會發現當第一個div浮動以後，第二個div跑到上面去了，這和position的效果差很少，可是不能這麼理解！固然你也能夠這樣理解，可是專業說法是:開發

  1.浮動元素產生了浮動流

  2.全部產生了浮動流的元素，塊級元素看不到他們【浮動元素】，可是產生了BFC的元素和文本類屬性的元素及文本都能看到浮動元素，那什麼是文本類元素呢？就是凡是帶來inline屬性的元素都叫文本類元素！

例如：我將上面那段HTML代碼中的第二個div去掉，而後換成一個文本，而後咱們再看效果，結果以下：

 1 <style type="text/css">
 2     *{
 3         margin:0px;
 4         padding:0px;
 5     }
 6     .demo1{
 7         float:left;
 8         width:100px;
 9         height:100px;
10         background-color: black;
11         opacity:0.5;
12     }
13 
14 </style>
15 </head>
16 <body>
17 
18     <div class="demo1">1</div>
19     123
20 </body>
View Code

你會看到此時，文本123並無跑到div下面！說明文本能夠看到浮動元素！因此浮動元素可不能認爲成產生了分層，它只能理解成產生了浮動流！浮動流對後面的元素影響不一而同！

再舉個例子：

 1 <style type="text/css">
 2     *{
 3         margin:0px;
 4         padding:0px;
 5     }
 6     .demo1{
 7         float:left;
 8         width:100px;
 9         height:100px;
10         background-color: black;
11         opacity:0.5;
12     }
13 
14 </style>
15 </head>
16 <body>
17 
18     <div class="demo1">1</div>
19     <img src="1.png">
20 </body>
View Code

效果以下：

這再次證實了只有塊級元素看不到浮動元素！最後再舉出一個BFC也是看獲得浮動元素的例子：

 1 <style type="text/css">
 2     *{
 3         margin:0px;
 4         padding:0px;
 5     }
 6     .demo1{
 7         float:left;
 8         width:100px;
 9         height:100px;
10         background-color: black;
11         opacity:0.5;
12     }
13     .demo2{
14         display:inline-block;
15         width:100px;
16         height:100px;
17         background-color: green;
18     }
19 
20 </style>
21 </head>
22 <body>
23 
24     <div class="demo1">1</div>
25     <div class="demo2">2</div>
26 </body>
View Code

 

咱們再來探究另外一個問題，咱們在外層div中嵌套了三個內層子div元素，當咱們給內層子div元素設置了浮動以後，會發現父div包不住子div了，這是由於當子div浮動以後，父div是塊級元素，塊級元素是看不到浮動元素的，因此包不住了！以下代碼和效果所示：

 1 <style type="text/css">
 2     *{
 3         margin:0px;
 4         padding:0px;
 5     }
 6     .wrapper{
 7         border:1px solid black;
 8     }
 9     .content{
10         float:left;
11         width: 100px;
12         height: 100px;
13         background-color: black;
14         color: #fff;
15     }
16 </style>
17 </head>
18 <body>
19     <div class="wrapper">
20         <div class="content">1</div>
21         <div class="content">2</div>
22         <div class="content">3</div>
23     </div>
24 </body>
View Code

那如今咱們怎麼能讓一個父級塊元素包住浮動子元素呢？

咱們知道浮動元素產生了浮動流，而浮動流乾擾了塊級元素，讓塊級元素看不到浮動元素，因此罪魁禍首是浮動流，咱們能夠試圖找找有沒有什麼辦法幹掉浮動流，咱們能夠藉助於clear屬性，該屬性有三個可選值：left、right、both，可是開發的時候咱們基本上都是使用both；

咱們先來看看正常效果：

 1 <style type="text/css">
 2     *{
 3         margin:0px;
 4         padding:0px;
 5     }
 6     .wrapper{
 7         border:1px solid black;
 8     }
 9     .content{
10         float:left;
11         width: 100px;
12         height: 100px;
13         background-color: black;
14         color: #fff;
15     }
16     p{
17         border:10px solid green;
18     }
19 </style>
20 </head>
21 <body>
22     <div class="wrapper">
23         <div class="content">1</div>
24         <div class="content">2</div>
25         <div class="content">3</div>
26         <p></p>
27     </div>
28 </body>
View Code

當咱們加了給p標籤加了clear屬性以後，p標籤就能回到他正常該在的位置了，clear屬性惟一的功能就是清除浮動流！以下所示：

 1 <style type="text/css">
 2     *{
 3         margin:0px;
 4         padding:0px;
 5     }
 6     .wrapper{
 7         border:1px solid black;
 8     }
 9     .content{
10         float:left;
11         width: 100px;
12         height: 100px;
13         background-color: black;
14         color: #fff;
15     }
16     p{
17         border:10px solid green;
18         clear:both;
19     }
20 </style>
21 </head>
22 <body>
23     <div class="wrapper">
24         <div class="content">1</div>
25         <div class="content">2</div>
26         <div class="content">3</div>
27         <p></p>
28     </div>
29 </body>
View Code

固然此時p標籤是有寬度，那p標籤的border能不能設置爲0px呢，設置了0px還好使很差使呢？答案是好使，只要p標籤邏輯上在這個位置，那麼它就能夠將父元素給磴開！以下所示：

 1 <style type="text/css">
 2     *{
 3         margin:0px;
 4         padding:0px;
 5     }
 6     .wrapper{
 7         border:1px solid black;
 8     }
 9     .content{
10         float:left;
11         width: 100px;
12         height: 100px;
13         background-color: black;
14         color: #fff;
15     }
16     p{
17         border:0px solid green;
18         clear:both;
19     }
20 </style>
21 </head>
22 <body>
23     <div class="wrapper">
24         <div class="content">1</div>
25         <div class="content">2</div>
26         <div class="content">3</div>
27         <p></p>
28     </div>
29 </body>
View Code

你會看到此時外層div就能包裹住內層div了，並且這種方式也是一勞永逸的，不管你的外層div中有多少個內層div，外層div均可以將內層div給包裹住！

這就是解決包住浮動元素的一個辦法！

固然咱們還有進一步的解決方案，這種方案卻是可行的，可是咱們說HTML是頁面的結構，而咱們在解決一個bug，一個問題的時候咱們不能在結構上亂修改，而像上面咱們加了一個p標籤，就至關於加了一個結構，而咱們使用這個p標籤的目的是但願它充當一個功能，解決一個問題，並非爲告終構，因此在正常編程的時候這個p標籤結構是不能寫在那裏的，那咋辦呢？

 

這裏咱們先來看僞元素的問題，什麼是僞元素呢？

　　僞元素存在於任何一個元素裏面，任意一個僞元素裏面有兩個特殊的僞元素，一個叫after,一個是before，僞元素和元素差很少一塊兒來使用，可是它沒有正常元素的結構，僞元素天生就存在，存在於每一個標籤裏面，而後咱們能夠經過css將這個僞元素選擇出來，例如：

<span>真帥</span>
View Code

雖然上面咱們僅僅看到了span標籤，並無看到僞元素，可是僞元素實際上已經伴隨着span標籤出生了，咱們能夠經過css樣式：

<style type="text/css">
	span::before{
		
	}
	span::after{
		
	}
</style>

經過上邊的span::before/after咱們就能夠將span標籤內部的【第一個/最後一個】邏輯元素選擇出來，注意咱們也能夠經過以下：

<style type="text/css">
    span::before{
        content: "案例";
    }
    span::after{
        
    }
</style>
</head>
<body>
    <span>真帥</span>
</body>
View Code

給span標籤內部添加內容，注意:僞元素也是屬於標籤的，before是屬於標籤的最前面一個元素，而after是屬於標籤的最後面一個元素，僞元素是自然的存在於元素裏面，對於僞元素咱們能夠拿CSS去選中它，並且能夠修改它的樣式結構，什麼均可以！只不過爲啥叫僞元素？是由於它的元素結構是存在的，可是它又沒寫在HTML裏面，因此叫僞元素！就是它能夠被CSS操做，可是它沒有HTML結構，因此叫僞元素【能夠當元素來操做，可是沒有元素結構】！固然也可使用after,以下所示：

<style type="text/css">
    span::before{
        content: "案例";
    }
    span::after{
        content: ",的確，確實是這樣";
    }
</style>
</head>
<body>
    <span>真帥</span>
</body>

這段代碼的效果圖以下所示：

不過這裏須要明確一點，僞元素天生存在，只不過咱們經過CSS將它選中並進行修改！由於僞元素沒有肯定的結構，因此你很難經過HTML往裏面添加內容，因此咱們只能經過CSS選擇器的content屬性往裏面添加內容，固然我這個content屬性的值也能夠啥也不寫，固然啥也不寫咱們也必須加上【content:""】,還要注意僞元素天生是行級元素【inline】,咱們能夠經過inline-block將其改成塊級元素，以下所示：

<style type="text/css">
    span::before{
        content: "";
        width: 100px;
        height: 100px;
        background-color: red;
        display: inline-block;
    }
    span::after{
        content: ",的確，確實是這樣";
    }
</style>
</head>
<body>
    <span>真帥</span>
</body>
View Code

獲得的效果圖：

固然對這個僞元素咱們也能夠定位，以下所示：

<style type="text/css">
    span::before{
        position:absolute;
        left:0px;
        top:100px;
        content: "";
        width: 100px;
        height: 100px;
        background-color: red;
        display: inline-block;
    }
    span::after{
        content: ",的確，確實是這樣";
    }
</style>
</head>
<body>
    <span>真帥</span>
</body>
View Code

因爲使用了絕對定位，因此就浮動到第二層了，將原來的位置空出來了，而後下面的元素就上來了！注意：僞元素天生是行級元素，若是想要給它設置長、高啥的，那麼必須給它改成塊級元素！那麼講這個僞元素和咱們要講的知識有啥聯繫呢，爲啥要先講這個僞元素講了呢？回到剛纔那個問題，咱們要在元素的最底部加入一個元素來清除浮動，可是若是真加上一個p元素就破壞了頁面的結構了，因此在元素最後加一個元素咱們這裏用僞元素最合適，我不改變頁面的結構，可是又在後面加一個元素，不要忘了清除元素的浮動【clear屬性，可是clear屬性必需要求當前元素爲塊級元素】，因此這裏使用了僞元素代替原來的p元素，以下所示：

<style type="text/css">
    .wrapper::after{
        content:"";
        clear:both;
        display:block;
    }
    .wrapper{
        border:1px solid black;
    }
    .content{
        float:left;
        width: 100px;
        height: 100px;
        background-color: black;
        color: #fff;
    }
</style>
</head>
<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
</body>
View Code

效果圖以下：

如上就是利用僞元素清除浮動的一個例子！並且之後咱們寫父級元素包住子級元素，子級元素是浮動元素，咱們只能這麼來寫【利用僞元素清除浮動】！

 固然除了這種方式以外，咱們還能夠父級元素變爲BFC元素，這樣父級元素就能夠看到浮動子元素了！以下代碼所示：

<style type="text/css">
    *{
        margin:0px;
        padding:0px;
    }
    .wrapper{
        position:absolute;
        border:2px solid red;
    }
    .content{
        float:left;
        width: 100px;
        height: 100px;
        background-color: black;
        color: #fff;
    }
</style>
</head>
<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
</body>
View Code

效果圖以下所示：

雖然如今也能夠包住子級浮動元素，可是說實話凡是使用了position:absolute或者float:left/right屬性的元素，系統都會將其轉換爲inline-block元素【高級知識】,若是變成了行級塊元素，那麼長和高由內容來決定！

舉例說明1：

<style type="text/css">
    *{
        margin:0px;
        padding:0px;
    }
    span{
        height:100px;
        width: 100px;
        background-color: red;
    }
</style>
</head>
<body>
    <span>123</span>
</body>
View Code

效果圖以下所示：

若是是加入了position:absolute,那麼span就會變成行內塊元素，以下代碼及效果圖所示：

<style type="text/css">
    *{
        margin:0px;
        padding:0px;
    }
    span{
        position:absolute;
        height:100px;
        width: 100px;
        background-color: red;
    }
</style>
</head>
<body>
    <span>123</span>
</body>
View Code

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程