2. 程式人生 > >css樣式float造成的浮動“塌陷”問題的解決辦法

css樣式float造成的浮動“塌陷”問題的解決辦法

阿新 • • 發佈：2018-11-30

什麼是CSS Float？

定義: float 屬性定義元素浮動到左側或右側。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級元素，而不論它本身是何種元素。元素物件設定了float屬性之後，它將不再獨自佔據一行。浮動塊可以向左或向右移動，直到它的外邊緣碰到包含它的框或另一個浮動塊的邊框為止。 
fload屬性有四個可用的值：Left 和Right 分別浮動元素到各自的方向，None (預設的) 使元素不浮動，Inherit 將會從父級元素獲取float值。 
下面讓我們來詳細瞭解下css float

1.Float的用處

除了簡單的在圖片周圍包圍文字，浮動可用於建立全部網頁佈局。

這裡寫圖片描述

浮動對小型的佈局同樣有用。例如頁面中的這個小區域。如果我們在我們的小頭像圖片上使用浮動，當調整圖片大小的時候，盒子裡面的文字也將自動調整位置：

這裡寫圖片描述

同樣的佈局可以通過在外容器使用相對定位，然後在頭像上使用絕對定位來實現。這種方式中，文字不會受頭像圖片大小的影響，不會隨頭像圖片的大小而有相應變化。

這裡寫圖片描述

程式程式碼 
需要用到的CSS樣式

body{ margin:0px; padding:0px; text-align:center; font:Arial, Helvetica, sans-serif
 
; font-size:12px;}
div,p,ul,li,h2,h3,h4,h5{ padding:0px; margin:0px;line-height:22px;}
h1{ font-size:14px;}
body >div{ text-align:left; margin:10px auto;}
#box{ width:900px; text-align:left;}
.box1{ width:370px;border:1px solid #f00;}
.box3{border:1px solid #f00;}
.box2{ width:370px;border:1px solid #f00;}
.box2
 
:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
.box1_1{ width:100px; height:70px;border:1px solid #6CF;}
.clear{ clear:both; height:0px; width:0px; font-size:0px; line-height:100%; }
.fl{ float:left;}
.fr{ float:right;}
.hidden{overflow:hidden;}
span{ color:#f00; font-weight:bold;}
.mar{ margin-left:20px;}
.inmar{ display:inline; margin-left:20px;}
.box1_2{ width:200px; float:left; height:100px; background-color:green;}
.box1_3{ width:150px; height:100px; margin-left:200px; background-color:red;}
.box1_4{ width:200px; float:left; height:100px; background-color:green;margin-right:-3px;}
.box1_5{ width:150px; float:left; height:100px; background-color:red;}
.box2_1{  margin-bottom:10px;float:left;width:80px; height:70px;border:1px solid #f00;}
.box2_2{ float:left;width:80px; height:70px;border:1px solid #f00;}
.padbot{ padding-bottom:10px;}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

2．float浮動元素不佔據正常文件流空間

由於浮動塊不在文件的普通流中，所以文件的普通流中的塊表現得就像浮動塊不存在一樣。 
·以下是3塊div均未加float時在瀏覽器內顯示如下圖

這裡寫圖片描述

程式碼：

<div>

<div><span>塊1</span></div>

<div><span>塊2</span></div>

<div><span>塊3</span></div>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

·塊1向右浮動，脫離文件流並且向右移動，直到它的右邊緣碰到包含塊的右邊緣。如下圖

這裡寫圖片描述

程式碼：

<div>

<div><span>塊1</span> float:right </div>

<div><span>塊2</span></div>

<div><span>塊3</span></div>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

·塊1向左浮動，脫離文件流並且向左移動，直到它的左邊緣碰到包含塊的左邊緣;IE8和Firefox中因為它不再處於文件流中，所以它不佔據空間，實際上覆蓋住了塊 2，使塊2從檢視中消失。而塊2的內容卻顯示在塊1未浮動時塊2所處的位置。而IE6和IE7中緊跟在浮動元素塊1的塊2也會跟著浮動。如下圖 
這裡寫圖片描述 
IE8和Firefox 
這裡寫圖片描述 
IE6和IE7

程式碼：

<div>

<div><span>塊1</span> float:left </div>

<div style="background:#FCC;">background:#FCC<span>塊2</span></div>

<div><span>塊3</span></div>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

3.浮動“塌陷”

·使用浮動(float)的一個比較疑惑的事情是他們怎麼影響包含他們的父元素的。如果父元素只包含浮動元素，且父元素未設定高度和寬度的時候。那麼它的高度就會塌縮為零。如果父元素不包含任何的可見背景，這個問題會很難被注意到，但是這是一個很重要的問題。在這裡我們可以稱為“塌陷”。如下圖

這裡寫圖片描述

程式碼：

<div>

<div><span>塊1</span> float:left</div>

<div><span>塊2</span> float:left</div>

<div><span>塊3</span> float:left</div>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

解決“塌陷”問題有以下三個方法 
1.在使用float元素的父元素結束前加一個高為0寬為0且有clear:both樣式的div 如下圖 
這裡寫圖片描述

程式碼：

<div>

<div><span>塊1</span> float:left </div>

<div><span>塊2</span> float:left</div>

<div><span>塊3</span> float:left</div>

<div></div>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

2.在使用float元素的父元素新增overflow:hidden;如下圖

這裡寫圖片描述

程式碼：

<div>

<div><span>塊1</span> float:left </div>

<div><span>塊2</span> float:left</div>

<div><span>塊3</span> float:left</div>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

3 .使用after偽物件清除浮動 如下圖

這裡寫圖片描述

程式碼：

<div>

<div><span>塊1</span> float:left </div>

<div><span>塊2</span> float:left</div>

<div><span>塊3</span> float:left</div>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  1. IE6雙邊距問題

·IE6雙邊距問題：一個居左浮動(float:left)的元素放置進一個容器盒(box)，並在浮動元素上使用了左邊界(margin-left) 在ie6內便產生雙倍邊距。如下圖

這裡寫圖片描述

IE7、IE8和Firefox

這裡寫圖片描述

IE6

程式碼：

<div>
<div><span>塊1</span> float:left marin_left:10px; </div>

<div><span>塊2</span> float:left marin_left:10px; </div>

<div><span>塊3</span> float:left</div>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

這個Bug僅當浮動邊界和浮動元素的方向相同時出現在浮動元素和容器盒的內邊緣之間，在這之後的任意有著相似邊界的浮動元素不會呈現雙倍邊界。只有特定的浮動行的第一個浮動元素會遭遇這個Bug。像居左的情況一樣，雙倍邊界同樣神祕地顯示在居右的相同方式。

解決IE6雙邊距問題: display:inline; 使浮動忽略 如下圖

這裡寫圖片描述

程式碼：

<div>

<div><span>塊1</span>float:left; marin_left:10px; display:inline; </div>

<div><span>塊2</span> float:left marin_left:10px; </div>

<div><span>塊3</span> float:left</div>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

5.IE6文字產生3象素的bug

·浮動IE6文字產生3象素的bug時指挨著浮動元素的文字會神奇的被踢出去3畫素，好像浮動元素的周圍有一個奇怪的力場一樣。如下圖

這裡寫圖片描述

firefox、IE7、IE8

這裡寫圖片描述

IE6

程式碼：

<div>

<div>float:left;width:200px; height:100px; background-color:green;</div>

<div> margin-left:200px; width:150px; height:100px; background-color:red;</div>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

解決浮動IE文字產生3象素問題以下有兩個方法 
1.左邊物件浮動，右邊採用外補丁的左邊距來定位 如下圖

這裡寫圖片描述

firefox、IE7、IE8、IE6

程式碼：

<div>

<div>margin-right:-3px; float:left;width:200px; height:100px; background-color:green;</div>

<div>width:150px; height:100px; background-color:red;</div>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

2.左邊物件浮動，右邊物件也浮動 如下圖

這裡寫圖片描述

firefox、IE7、IE8、IE6

程式碼：

<div>

<div> float:left; width:200px;height:100px; background-color:green;</div>

<div> float：left;width:150px; height:100px; background-color:red;</div>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

6.IE6,IE7 中，底邊距 bug

·IE6,IE7 中，底邊距 bug是當浮動父元素有浮動子元素時，這些子元素的底邊距會被父元素忽略掉。如下圖

這裡寫圖片描述

firefox

這裡寫圖片描述

IE6、IE7

程式碼：

<div>

<div> margin-bottom:10px; float:left;</div>

<div> margin-bottom:10px; float:left;</div>

<div> margin-bottom:10px; float:left;</div>

<div> margin-bottom:10px; float:left;</div>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

解決IE6,IE7 中，底邊距 bug：用父元素的底內補白(padding)代替。如下圖 
這裡寫圖片描述

firefox、IE7、IE8、IE6

程式碼：

<div>

<div>float:left;</div>

<div>float:left;</div>

<div> float:left;</div>

<div>float:left;</div>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

這個方法的缺點是不能換行，如果想要換行的話，建議將浮動父元素的浮動子元素設定padding值。

相關推薦

css樣式float造成的浮動“塌陷”問題的解決辦法

什麼是CSS Float？ 定義: float 屬性定義元素浮動到左側或右側。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級元素，而不論它本身是何種元素。元素物件設定了float屬性之後，它將不再獨自佔據一行。浮動塊可以向左或向

子元素浮動讓父元素塌陷解決辦法

父元素沒有給固定高度，子元素設有固定的高度，但是父雲素也沒有被子元素的高度撐開。子元素浮動了，而浮動屬性會使元素脫離文件流，即子元素設定float屬性後，當前的html文件會當作元素不存在一樣，所以可以看作父元素內根本沒有內容，高度當然也就撐不開。  解決辦法： 

Chrome不支持css字體小於12px的解決辦法

ner ges none 變化 pac zh-cn 利用 pack block 我們先來看個效果圖（chrome下）： 從上面的圖可以很明顯地看出Chrome下css設置字體大小為12px及以下時，顯示的都是一樣大小，都是默認12px； 那麽網上

QML中呼叫C++耗時操作造成阻塞的解決辦法

  在QML中經常會呼叫用C++寫的比較耗時的操作時，一般會造成介面的卡死。剛開始的時候是想著是不是可以在QML中開闢新執行緒，一查還真有，WorkerScript。但這玩意兒有點坑的是你不能訪問其他物件的屬性、方法，官方原文是這樣寫的：   Since the

linux下由於系統編碼問題造成亂碼的解決辦法

  下面介紹一下由於linux系統編碼設定不正確造成潤乾報表應用亂碼問題的解決辦法。 第一步：檢查linux的系統編碼。 檢查linux的系統編碼，確定系統是否支援中文。在linux系統的終端中輸入命令：locale，就會看到打印出的系統編碼資訊。如果打印出來的資訊如下，則

CSS--DIV height:100%無效的解決辦法

在設定DIV高度的時候，會用到一個height:100%的大小，來讓div撐滿瀏覽器高度。但是我們會發現，直接在div中寫上“style:”height:100%;””是無效的。那麼如何才能讓div的css height:100%生效呢？解決辦法很簡單…… 在

重啟iptables造成nf_conntrack_max修改解決辦法

解決 star rest trac bsp iptable load conn .net 現象： 查看 sysctl -a |grep nf_conntrack_maxnet.netfilter.nf_conntrack_max = 554288net.nf_conntr

使用float浮動之後，父元素“塌陷”的解決辦法

常常在並排div的時候使用到float屬性，但是使用之後會發現他們的父元素會沒有高度，之後的元素會“擠上來”，造成“塌陷”。 比如，我們想要的如下效果： 程式碼如下： <!DOCTYPE html> <html>   &nb

css中常見margin塌陷問題之解決辦法

com str 出現 bottom 分享 border text ren 間隙 塌陷問題 當兩個盒子在垂直方向上設置margin值時，會出現一個有趣的塌陷現象。 ①垂直並列 　　　　首先設置兩個DIV,並為其制定寬高 1 /*HTML部分*/ 2 <

HTML、CSS中浮動的影響及解決辦法

　　首先，什麼叫做浮動？通常情況下，元素都是按預設文件流排列，而浮動則是讓預設文件流下的元素漂浮起來水平排列。浮動排列順序不會發生改變，預設時誰在第一位，浮動時便排在第一個。 　　但是給元素設定浮動後會帶來一些影響： 　　（1）在父級沒有給高度的情況下，子級浮動，父級會沒有高度 　　（2）行內元素浮動後

css之子元素浮動導致父元素高度塌陷解決方案

問題引入：在製作導航欄時，若父元素ul不給出高度的具體數值，只給背景。而子元素li又用到了float:left。 那麼，這種情況就會導致父元素的背景“消失”，因為浮動元素脫離文件流，不佔據空間，因此相當於父列表沒有內容。 解決方案： 一：新增進行清理浮動的元素（但書中說，這

CSS中子元素浮動導致父元素高度塌陷解決方案

<style type="text/css"> #container { border: 1px solid green; } .div1 { float: left; width: 100px; height: 100px; } .div2 {

【問題解決】BootStrap.css與layDate日期選擇樣式起衝突的解決辦法

 問題如圖: 給大家看下正常的layDate年份選擇圖片: 一開始想到的，以為是自己沒有將layer.css匯入，或者layDate.css沒有匯入，出現的這個問題，結果發現只要匯入layer.css，會自動匯入layDate.css的，所以

H5頁面，遇到css樣式不相容部分ios機型，解決辦法（No .1）

問題：App有一個底部欄（要求：永遠bottom：0），但是在部分頁面，底部欄超出了螢幕的高度，所以，看上去好像是消失不見了一樣。。思路：頁面掛載的時候，判斷一下offsetTop，如果大於當前螢幕的高度，就讓其上移：translateY（上移動數值為：當前底部欄的offse

父元素高度塌陷的解決辦法

eight 20px otto 比較 解決辦法 兩個 pla over ear 很多時候子元素浮動的，會造成父元素塌陷 解決方法 1.添加一個空元素，並設置成清除浮動，即： <div style="clear:both;"></div> 優點：通俗易

Maven項目源文件夾下的文件夾顯示包樣式的解決辦法

src 默認 maven項目 解決辦法 文件 prop pro 如果 樣式 創建的maven項目，源文件夾下創建的文件夾默認顯示是包的樣式，如果需要改變，則右擊項目——properties——Java Build Path Maven項目源文件夾下的文件夾

CSS學習筆記——CSS中定位的浮動float（20171129002）

itl charset ear 浮動元素 有效 而是 mark 盒模型 頁面 昨天在解決了盒模型的問題之後又出現了新的知識模糊點：浮動和絕對定位？今天先解決浮動相關的問題，首先列舉出想要解決的問題： 1.浮動到底是怎麽樣的？ 2.浮動對元素的影響有什麽？ 3.浮動主要用來幹

CSS鼠標懸停圖片加邊框效果，頁面布局發生錯位的解決辦法

csharp rec 解決辦法 鼠標 margin sharp arp over 圖片 CSS鼠標懸停圖片加邊框效果，頁面布局發生錯位的解決辦法 .recomend-list{ width:1200px; a{ @extend %fl;

一次服務器斷電，造成innodb引擎表（日誌表）損壞的解決辦法

ces init nal rem min something fault more caused 1、mysql日誌報錯innodb引擎提示數據庫沒有正常關閉，報innodb錯誤180112 0:49:28 InnoDB: Database was not shut d

Cannot find module "element-ui/lib/theme-default/index.css"——解決辦法

efault install element mod cnpm CA 定義主題 index hub 在vuejs中使用element-ui 1、安裝 cnpm install style-loader --save-dev cnpm install css-loader