前言
浮動(dòng)是CSS的三種基本定位機(jī)制之一，在現(xiàn)在網(wǎng)頁(yè)的DIV+CSS基本布局中，無(wú)論是兩列布局，三列布局，多列布局，還是混合型布局，浮動(dòng)幾乎無(wú)處不在。浮動(dòng)機(jī)制使用很簡(jiǎn)單，只需要設(shè)置元素的float屬性即可，使用也很廣泛，無(wú)論網(wǎng)頁(yè)的大布局，還是網(wǎng)頁(yè)中小模塊的排版，都可以輕松使用這種機(jī)制方式進(jìn)行CSS樣式設(shè)置完成想要的排版效果，但浮動(dòng)機(jī)制有一個(gè)問(wèn)題，就是浮動(dòng)的元素會(huì)脫離文檔流，并且對(duì)緊鄰它之后的不浮動(dòng)元素和它的父元素有影響，一不小心就會(huì)導(dǎo)致后續(xù)布局排版錯(cuò)亂，所以必須要在設(shè)置浮動(dòng)之后對(duì)其他可能會(huì)受影響的元素做清理。
我對(duì)浮動(dòng)元素導(dǎo)致父元素受影響后的清理的處理方法做了自己的一些簡(jiǎn)單歸納，下面通過(guò)自己的一個(gè)簡(jiǎn)單示例進(jìn)行分析說(shuō)明。
示例的html代碼：
<!DOCTYPE html>
<html>
<head>
<title>CSS浮動(dòng)影響清除方法測(cè)試</title>
</head>
<body>
<div class="container">
<span class="left-img">
</span>
<p class="right-paragraph">
雨，像銀灰色黏濕的蛛絲，織成一片輕柔的網(wǎng)，網(wǎng)住了整個(gè)秋的世界。天也是暗沉沉的，像古老的住宅里纏滿(mǎn)著蛛絲網(wǎng)的屋頂。那堆在天上的灰白色的云片，就像屋頂上剝落的白粉。在這古舊的屋頂?shù)幕\罩下，一切都是異常的沉悶。園子里綠翳翳的石榴、桑樹(shù)、葡萄藤，都不過(guò)代表著過(guò)去盛夏的繁榮，現(xiàn)在已成了古羅馬建筑的遺跡一樣，在蕭蕭的雨聲中瑟縮不寧，回憶著光榮的過(guò)去。草色已經(jīng)轉(zhuǎn)入憂(yōu)郁的蒼黃，地下找不出一點(diǎn)新鮮的花朵；宿舍墻外一帶種的嬌嫩的洋水仙，垂了頭，含著滿(mǎn)眼的淚珠，在那里嘆息它們的薄命，才過(guò)了兩天的晴美的好日子又遇到這樣霉氣薰薰的雨天。只有墻角的桂花，枝頭已經(jīng)綴著幾個(gè)黃金一樣寶貴的嫩蕊，小心地隱藏在綠油油橢圓形的葉瓣下，透露出一點(diǎn)新生命萌芽的希望。
雨靜悄悄地下著，只有一點(diǎn)細(xì)細(xì)的淅瀝瀝的聲音。桔紅色的房屋，像披著鮮艷的袈裟的老僧，垂頭合目，受著雨底洗禮。那潮濕的紅磚，發(fā)出有刺激性的豬血的顏色和墻下綠油油的桂葉成為強(qiáng)烈的對(duì)照。灰色的癩蛤蟆，在濕爛發(fā)霉的泥地里跳躍著；在秋雨的沉悶的網(wǎng)底，只有它是唯一的充滿(mǎn)愉快的生氣的東西。它背上灰黃斑駁的花紋，跟沉悶的天空遙遙相應(yīng)，造成和諧的色調(diào)。它噗通噗通地跳著，從草窠里，跳到泥里，濺出深綠的水花。 雨，像銀灰色黏濡的蛛絲，織成一片輕柔的網(wǎng)，網(wǎng)住了整個(gè)秋的世界。 --張愛(ài)玲
</p>
</div>
</body>
</html>
css代碼：
* {
margin: 0;
padding: 0;
}
.container {
width: 700px;
margin: 10px auto;
background-color: darkgray;
border: 10px dotted #333;
}
.left-img {
float: left;
width: 177px;
border: 5px dotted burlywood;
}
.right-paragraph {
float: right;
width: 500px;
border: 5px dotted dodgerblue;
}
示例在網(wǎng)頁(yè)上的效果截圖：
父容器container中包含一張圖片以及一段文字，其中父元素仍在普通的文檔流中，而圖片設(shè)置左浮動(dòng)，文本p設(shè)置右浮動(dòng)，兩個(gè)元素均脫離了文檔流。所以受子元素浮動(dòng)設(shè)置的影響，其中父元素中相當(dāng)于沒(méi)有任何元素，在未設(shè)置固定高度的情況下無(wú)法撐開(kāi)，默認(rèn)內(nèi)容高度為0。
這種css樣式設(shè)置在布局中很常見(jiàn)，但如果父元素?zé)o法撐開(kāi)，在父容器之后的元素布局可能會(huì)因此出現(xiàn)位置的排版錯(cuò)亂。這種效果往往不是我們所需要的。我們更期待的布局效果是，父元素?zé)o需設(shè)置固定高度，而是根據(jù)其中子元素的最大高度來(lái)?yè)伍_(kāi)父元素的高度，即父元素height=子元素中高度最大值。
本身普通文檔流中css樣式布局可自動(dòng)父元素會(huì)根據(jù)其子元素的最高值撐開(kāi)相應(yīng)高度，但由于子元素均浮動(dòng)導(dǎo)致脫離文檔流的影響，父元素只能通過(guò)方法進(jìn)行清理浮動(dòng)元素的影響。
清理之后實(shí)現(xiàn)的效果圖
清理方法思路解析
1. 在父容器的最后一個(gè)子元素的下面添加一個(gè)空元素并且清理它
代碼展示：
<div class="container">
<span class="left-img">
</span>
<p class="right-paragraph">
<!--文本內(nèi)容-->
</p>
<div style="clear:both;"></div>
</div>
這種方式會(huì)添加多余的不必要的代碼。
2. 選擇浮動(dòng)父容器
代碼展示：
.container {
float: left;
}
但下一個(gè)元素會(huì)受到這個(gè)浮動(dòng)元素的影響。
3. 設(shè)置父容器的屬性overflow等于hidden或auto
代碼展示：
.container {
overflow: hidden;
/*overflow: auto;*/
}
overflow屬性定義在包含的內(nèi)容對(duì)于指定的尺寸太大的情況下元素應(yīng)該怎么樣。在默認(rèn)的情況下，內(nèi)容會(huì)溢出到框外，進(jìn)入相鄰的空間。應(yīng)用值為hidden或auto的overflow屬性有一個(gè)有用的副作用，這會(huì)自動(dòng)地清理包含的任何浮動(dòng)元素。但這個(gè)方法并不適合所有的情況，因?yàn)樵O(shè)置框的overflow屬性會(huì)影響他的表現(xiàn)。更具體來(lái)說(shuō)，這種方法在某種情況下會(huì)產(chǎn)生滾動(dòng)條或截?cái)鄡?nèi)容。
4. 使用CSS方法時(shí)結(jié)合使用:after偽類(lèi)和內(nèi)容聲明在指定的現(xiàn)有內(nèi)容的末尾添加新的內(nèi)容
代碼展示：
.clear:after {
content: '';
height: 0;
visibility: hidden;
display: block;
clear: both;
}
<div class="container clear">
<span class="left-img">
</span>
<p class="right-paragraph">
雨，像銀灰色黏濕的蛛絲，織成一片輕柔的網(wǎng)，網(wǎng)住了整個(gè)秋的世界。天也是暗沉沉的，像古老的住宅里纏滿(mǎn)著蛛絲網(wǎng)的屋頂。那堆在天上的灰白色的云片，就像屋頂上剝落的白粉。在這古舊的屋頂?shù)幕\罩下，一切都是異常的沉悶。園子里綠翳翳的石榴、桑樹(shù)、葡萄藤，都不過(guò)代表著過(guò)去盛夏的繁榮，現(xiàn)在已成了古羅馬建筑的遺跡一樣，在蕭蕭的雨聲中瑟縮不寧，回憶著光榮的過(guò)去。草色已經(jīng)轉(zhuǎn)入憂(yōu)郁的蒼黃，地下找不出一點(diǎn)新鮮的花朵；宿舍墻外一帶種的嬌嫩的洋水仙，垂了頭，含著滿(mǎn)眼的淚珠，在那里嘆息它們的薄命，才過(guò)了兩天的晴美的好日子又遇到這樣霉氣薰薰的雨天。只有墻角的桂花，枝頭已經(jīng)綴著幾個(gè)黃金一樣寶貴的嫩蕊，小心地隱藏在綠油油橢圓形的葉瓣下，透露出一點(diǎn)新生命萌芽的希望。
雨靜悄悄地下著，只有一點(diǎn)細(xì)細(xì)的淅瀝瀝的聲音。桔紅色的房屋，像披著鮮艷的袈裟的老僧，垂頭合目，受著雨底洗禮。那潮濕的紅磚，發(fā)出有刺激性的豬血的顏色和墻下綠油油的桂葉成為強(qiáng)烈的對(duì)照。灰色的癩蛤蟆，在濕爛發(fā)霉的泥地里跳躍著；在秋雨的沉悶的網(wǎng)底，只有它是唯一的充滿(mǎn)愉快的生氣的東西。它背上灰黃斑駁的花紋，跟沉悶的天空遙遙相應(yīng)，造成和諧的色調(diào)。它噗通噗通地跳著，從草窠里，跳到泥里，濺出深綠的水花。 雨，像銀灰色黏濡的蛛絲，織成一片輕柔的網(wǎng)，網(wǎng)住了整個(gè)秋的世界。 --張愛(ài)玲
</p>
</div>
這個(gè)方法在IE6以及更低版本中不起作用。
以上大概就是幾種清理方式的簡(jiǎn)單歸納，大家可以根據(jù)自己的實(shí)際使用場(chǎng)景和局限進(jìn)行選擇。
