css一个盒子里可以装3个图片并排吗_John: CSS浮动与清除浮动属性详解（CSS float clear）...
CSS里的浮動，可以讓元素脫離標準流，從左上角或右上角依次貼邊排列。
下面這個案例將會幫我們了解浮動的基本情況。下面這段代碼塊，外面是一個大div，里面包含著3個div，第一個左浮動，后兩個無浮動。
//style樣式.a{width: 500px;height: 500px;background-color: pink;}.a1{width: 100px;height: 100px;float: left;background-color: red;}.a2{background-color: blue;}.a3{background-color: yellow;} //body部分 <div class="a"><div class="a1">a1</div><div class="a2">a2</div><div class="a3">a3</div> </div>它的運行結果是：
全部代碼見文章最后的附錄代碼塊中的“第一張圖片.html”在上圖中，a2和a3的區域只被展示了一部分，還有一部分被a1層疊（壓在下面）了。這是因為a2和a3都沒有設置width和height，所以寬度會自動充滿整個父容器，而因為a1脫離了標準流，所以a2和a3可以繼續使用被a1壓住的空間。而它們的Height也沒有設置，其默認值是auto，也就是自適應，所以a3和a3的高度都是文字的行高。
那么a2和a3中的文字為什么沒有被a1壓在底下呢？這是因為文字會自動避開浮動元素，一定要讓自己顯示出來，所以a2和a3中的文字才會被我們看到。
這時候，如果在a2中加1個clear:both屬性，即讓a2不再受之前的浮動元素的影響（即a2認為之前的元素都是普通元素而不是浮動元素），這樣，a2便認為，哦，a1就是個非常普通的塊元素，那a2自然要顯示在a1的下一行了，如下圖。
全部代碼見文章最后的附錄代碼塊中的“第二張圖片.html”下面我們看點復雜點的例子。
在下面的代碼中，我們創建了兩個大div，每個大div中有4個小div，每個小div都是向左浮動的。它們的尺寸、顏色如代碼塊所示。
//CSS樣式* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;}.b{width: 500px;border: 2px solid blue;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;} //body部分 <div class="a"><div class="a1"></div><div class="a1"></div><div class="a1"></div><div class="a1"></div> </div> <div class="b"><div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b1"></div> </div>那他們的運行結果如何呢?是下面這樣的。
全部代碼見文章最后的附錄代碼塊中的“第三張圖片.html”兩個大div，我們只能看到兩條線，這是因為它們沒有設置高度（即自適應，被里面的元素撐開）但是實際上又沒有被撐開，因為子div都脫離了標準流，所以才撐不開大div，于是大div的height就是0，紅藍長線分別是它們的border，而且是兩倍的border，因為高度是0所以上下border碰在一起了。紅線和藍線之間有大約20px的距離，這是我們給第一個大div設置的margin-bottom:20px在起作用。
而黃色的div們之所以跑到了圖中的位置，從第一個黃div說起吧，它其實想貼最后一個粉紅div的右邊框，但顯然第二個大div的剩余寬度要比它的寬度要小，所以它過不去，于是又去嘗試貼第3個、2個、1個粉紅div的邊，顯然都做不到，于是它只能去粉紅div的下一行貼父元素的左邊框了。而后面的黃div則依次貼它的邊。
如果我們把第一個黃小div的寬度縮小到可以到上一行貼邊，效果就會像下面這樣：
全部代碼見文章最后的附錄代碼塊中的“第四張圖片.html”而如果第二個大div足夠寬，其內部的div也都能夠直接貼第4個粉紅div的右邊框了，如下圖。
全部代碼見文章最后的附錄代碼塊中的“第五張圖片.html”全部代碼見鏈接中的“第一張圖片.html”
那么怎樣才能如我們所愿，正常顯示兩個大div包含著4個小div呢？
第一種方法是給大div設置height。本來我們讓height自適應，但因為小div脫離了標準文檔流所以無法撐開大div，那我們給大div設置height，顯然就解決了。
即：在兩個大div的樣式中加一行height:150px;（只要該值大于其內部小div的高度即可）
起到效果如下圖所示：
全部代碼見文章最后的附錄代碼塊中的“第六張圖片.html”但是這樣，我們就無法實現高度自適應了，只能讓height是個定值，因此稍有缺陷。
那我們嘗試另一種思路，即用clear屬性來清除float對下面元素帶來的影響。
首先說外墻法，就是在兩個大div之間放一個大div，寫上clear:both。這樣效果就會如下圖所示：
全部代碼見文章最后的附錄代碼塊中的“第六點無張圖片.html”（這個是后期補充的內容）上圖中，紅藍長線之間隔著一個高度是0的div，這個div唯一的作用就是清除上文的浮動。也就是說，這個div本身會覺得上文都是正常的，所以會貼著粉紅子盒子的下邊排列。但是這個方法起到的作用很有限，就只是讓下面的大div會排列在粉紅盒子的下邊以后而已。
下面介紹最主流、好用（我自己覺得）的方法：內墻法。
內墻法就是在大盒子里最后一個浮動的子盒子后面加一個子盒子，讓其屬性值clear:both。
全部代碼見文章最后的附錄代碼塊中的“第七張圖片.html”這個圖才是我們一般情況下最想要的樣式哦。實際上在上圖中，兩個外層大盒子的下邊框上方都有一個我們看不到的屬性為clear的子盒子，因為我們沒有設置寬高，所以寬會充滿整個外層大盒子，而高會自適應，而我們又沒有設置內部元素，所以撐不開，height是0，且我們沒有設置border，自然這個盒子我們就看不到了。如果我們給它設置下border為黑色，那么就能看到這個div了，如下圖，可以清晰地看到黑色邊框。
全部代碼見文章最后的附錄代碼塊中的“第八張圖片.html”需注意，如果不設置border，只設置background-color，我們還是看不到，因為height是0，所以自然也沒法顯示bgcolor了。
但實際上，內墻法也有缺陷，樣式上是好看了，但是從語義上，多了一個沒有內容也機會沒有用的元素，很多人認為是在結構上是不值得提倡的。
你還有哪些問題呢？可以在評論區參與討論哦~
附錄：以上8張圖片的完整代碼：
第一張圖片：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>day2 clear1</title><style type="text/css">.a{width: 500px;height: 500px;background-color: pink;}.a1{width: 100px;height: 100px;float: left;background-color: red;}.a2{background-color: blue;/*clear: both;*/}.a3{background-color: yellow;}</style> </head> <body> <div class="a"><div class="a1">a1</div><div class="a2">a2</div><div class="a3">a3</div> </div> </body> </html>第二張圖片：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>day2 clear1</title><style type="text/css">.a{width: 500px;height: 500px;background-color: pink;}.a1{width: 100px;height: 100px;float: left;background-color: red;}.a2{background-color: blue;clear: both;}.a3{background-color: yellow;}</style> </head> <body> <div class="a"><div class="a1">a1</div><div class="a2">a2</div><div class="a3">a3</div> </div> </body> </html>第三張圖片：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>3</title><style type="text/css">* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;}.b{width: 500px;border: 2px solid blue;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;}</style> </head> <body> <div class="a"><div class="a1"></div><div class="a1"></div><div class="a1"></div><div class="a1"></div> </div> <div class="b"><div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b1"></div> </div> </body> </html>第四張圖片：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>3</title><style type="text/css">* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;}.b{width: 500px;border: 2px solid blue;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;}#bbb{width: 10px;}</style> </head> <body> <div class="a"><div class="a1"></div><div class="a1"></div><div class="a1"></div><div class="a1"></div> </div> <div class="b"><div class="b1" id="bbb"></div><div class="b1"></div><div class="b1"></div><div class="b1"></div> </div> </body> </html>第五張圖片：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>3</title><style type="text/css">* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;}.b{width: 1000px;border: 2px solid blue;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;}</style> </head> <body> <div class="a"><div class="a1"></div><div class="a1"></div><div class="a1"></div><div class="a1"></div> </div> <div class="b"><div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b1"></div> </div> </body> </html>第六張圖片：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>3</title><style type="text/css">* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;height: 150px;}.b{width: 500px;border: 2px solid blue;height: 150px;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;}</style> </head> <body> <div class="a"><div class="a1"></div><div class="a1"></div><div class="a1"></div><div class="a1"></div> </div> <div class="b"><div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b1"></div> </div> </body> </html>第六點五張圖片：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>3</title><style type="text/css">* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;}.b{width: 500px;border: 2px solid blue;clear: left;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;}.cl{clear: both;}</style> </head> <body> <div class="a"><div class="a1"></div><div class="a1"></div><div class="a1"></div><div class="a1"></div> <!-- <div class="cl"></div>--> </div> <div class="cl"></div> <div class="b"><div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b1"></div> <!-- <div class="cl"></div>--> </div> </body> </html>第七張圖片：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>3</title><style type="text/css">* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;}.b{width: 500px;border: 2px solid blue;clear: left;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;}.cl{clear: both;}</style> </head> <body> <div class="a"><div class="a1"></div><div class="a1"></div><div class="a1"></div><div class="a1"></div><div class="cl"></div> </div> <div class="b"><div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="cl"></div> </div> </body> </html>第八張圖片：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>3</title><style type="text/css">* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;}.b{width: 500px;border: 2px solid blue;clear: left;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;}.cl {clear: both;border: 2px solid black;}</style> </head> <body> <div class="a"><div class="a1"></div><div class="a1"></div><div class="a1"></div><div class="a1"></div><div class="cl"></div> </div> <div class="b"><div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="cl"></div> </div> </body> </html>總結
以上是生活随笔為你收集整理的css一个盒子里可以装3个图片并排吗_John: CSS浮动与清除浮动属性详解（CSS float clear）...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python开源项目新手_10大Pyth
- 下一篇： 仲裁文件夹服务器,仲裁服务器是什么