那些年使用過的清除浮動的方法

wqj97 發布于2019-04-22 16:12 / 1295人閱讀

摘要：浮動使元素框向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框脫離了文檔的普通流，所以文檔的普通流中的框表現得就像浮動框不存在一樣。

浮動使元素框向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

由于浮動框脫離了文檔的普通流，所以文檔的普通流中的框表現得就像浮動框不存在一樣。

這段代碼：

 style 
 .parent {
 width: 500px;
 margin: 0 auto;
 .left {
 float: left;
 list-style: none;
 padding-right: 5px;
 /style 
 div 
 li 111 /li 
 li 222 /li 
 li 333 /li 
 /ul 
 div 這是第一個內容 /div 
 div 這是第二個內容 /div 
 div 這是第二個內容 /div 
 /div

對三個li進行左浮動。我們預想的是div0的內容在同一行顯示，其他的各自展示在一行中。然而事實是，div1緊跟在div0后，這便是浮動造成的影響。

浮動解決方法：

1、浮動元素父級設高法

也就是給div0設置一個高度。來看看效果：

.div0 { height: 30px; }

很好的解決了問題，不過平時我們在使用中不能精確的得出元素的高度，所以這個方法不太實用。

2、空div清除浮動

也就是給浮動元素后面加一個空的div標簽，設置clear屬性來清除浮動：

 style 
 .clear { clear: both }
 /style 

 div 
 li 111 /li 
 li 222 /li 
 li 333 /li 
 /ul 
 div /div 
 div 這是div1 /div 
 div 這是div2 /div 
 div 這是div3 /div 
 /div

clear 屬性定義了元素的哪邊不允許出現浮動元素,這里也可以設置為clear: left。在這里直接給div1一個clear樣式能起到同樣的效果。

3、浮動元素父級設overflow:hidden/auto法

和第一種方法一樣，只需要給div0加一個overflow屬性：

.div0 {
 overflow: hidden;
 *zoom: 1 // 兼容ie7/6,*號表示只在ie7以下版本生效
}

overflow本意是對溢出元素框的內容做處理。在這里用，剛好可以撐開父元素的高度。

4、浮動元素父級設display:inline-block

.div0 { display: inline-block}

這種方式有種缺點，會使margin: 0 auto居中方式失效。

給div0增加一個寬度并且設置居中,并且用上面三種方式之一清除浮動后效果是這樣:

 .div0 {
 overflow: auto; //清除浮動
 width: 100px;
 margin: 0 auto; // 居中
 }

但是使用display: inline-block清除浮動，margin居中失效：

 .div0 {
 display: inline-block; //清除浮動
 width: 100px;
 margin: 0 auto; // 居中
 }

5、偽類after清除浮動法

目前最常用也最好用的清除浮動方法。ie需要設置zoom觸發hasLayout。

 style 
 .clearFix {
 *zoom: 1
 .clearFix:after {
 display: block;
 content: "";
 width: 0;
 height: 0;
 font-size: 0;
 clear: both;
 visibility: hidden;
 overflow: hidden
 /style 
 div 
 li 111 /li 
 li 222 /li 
 li 333 /li 
 /ul 
 div 這是div1 /div 
 div 這是div2 /div 
 div 這是div3 /div 
 /div

GPU云服務器云服務器的清除方法清除浮動 php抽象方法的使用 vmware的使用方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/801.html

那些年使用過的清除浮動的方法

摘要：浮動使元素框向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框脫離了文檔的普通流，所以文檔的普通流中的框表現得就像浮動框不存在一樣。浮動使元素框向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框脫離了文檔的普通流，所以文檔的普通流中的框表現得就像浮動框不存在一樣。這段代碼： .parent { width: ...

AbnerMing 2019-04-23 11:40 評論0 收藏0
理解CSS浮動與清理

摘要：浮動為什么會有文本環繞效果產生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。本文主要討論以下幾個問題：1.浮動的原始用途...

Tonny 2019-08-29 12:23 評論0 收藏0
理解CSS浮動與清理

摘要：浮動為什么會有文本環繞效果產生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。本文主要討論以下幾個問題：1.浮動的原始用途...

cyqian 2019-08-01 16:39 評論0 收藏0
浮動與浮動的清除

摘要：一浮動一浮動說浮動就必須提及一下文檔流，當中的元素按照從左到右，從上到下的順序進行排列稱之為文檔流，也就是正常排列。一、浮動說浮動就必須提及一下文檔流，HTML當中的元素按照從左到右，從上到下的順序進行排列稱之為文檔流，也就是正常排列。而浮動是什么呢？浮動會讓元素脫離文檔流，假如A元素浮動了，原本排在該元素之后的元素發現A元素不在這個文檔流了，就會無視它往上接到A元素前面的元素之后(PS...

Chao 2019-04-23 13:34 評論0 收藏0