CSS之清除浮動 && float屬性

時間 2020-04-29

標籤 css 清除浮動 float 屬性欄目 CSS 简体版

原文原文鏈接

DIV層內的元素在使用了float屬性後沒法自動改變高度的解決辦法：

有的時候爲了讓外側層根據內容自動調整，沒有設置高度或寬度，通常都會正常顯示。
但若是層內元素使用了float屬性，就會使那些元素脫離文件流，就沒法再擴充容器層，就會致使外層大小沒法根據內容自動調整。
關於這個問題，總結出以幾種在當下幾種主流瀏覽器都兼容的方法，供你們參考。

1.清除浮動
在層中的有浮動屬性的元素最後邊加上來清除 
<</SPAN>divstyle="background:#eee;"><</SPAN>divstyle="height:100px;width:100px;background:Green; 
float:left;"></</SPAN>div><</SPAN>divstyle="height:100px;width:100px;background:Red; float:right;"></</SPAN>div>style="clear:both;">></</SPAN>div>

2.將display設置爲table
通常來講，外層寬度都是固定的，設置寬度後能夠將外層的顯示模式設置爲：display:table

<</SPAN>divstyle="background:#eee; 
width:500px;display:table;"><</SPAN>divstyle="height:100px;width:100px;background:Green; 
float:left;"></</SPAN>div><</SPAN>divstyle="height:100px;width:100px;background:Red; float:right;"></</SPAN>div></</SPAN>div>

3.添加overflow設置爲hidden
將外層的overflow設置爲：hidden:

<</SPAN>divstyle="background:#eee;overflow:hidden; 
"><</SPAN>divstyle="height:100px;width:100px;background:Green; float:left;"></</SPAN>div><</SPAN>divstyle="height:100px;width:100px;background:Red; float:right;"></</SPAN>div></</SPAN>div>

float屬性

基本浮動規則

先來了解一下block元素和inline元素在文檔流中的排列方式。css

　　block元素一般被現實爲獨立的一塊，獨佔一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素能夠設置width、height、margin、padding屬性；html

　　inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效瀏覽器

常見的塊級元素有 div、form、table、p、pre、h1～h五、dl、ol、ul 等。
常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等

所謂的文檔流，指的是元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列。佈局

脫離文檔流，也就是將元素從普通的佈局排版中拿走，其餘盒子在定位的時候，會當作脫離文檔流的元素不存在而進行定位。字體

假如某個div元素A是浮動的，若是A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(若是一行放不下這兩個元素，那麼A元素會被擠到下一行)；若是A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部老是和上一個元素的底部對齊。此外，浮動的框以後的block元素元素會認爲這個框不存在，但其中的文本依然會爲這個元素讓出位置。浮動的框以後的inline元素，會爲這個框空出位置，而後按順序排列。spa

示例代碼：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin: 0; } .r1{ width: 300px; height: 100px; background-color: #7A77C8;
 float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; /*float: left;*/ } .r3{ width: 100px; height: 200px; background-color: darkgreen; float: left; } </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>



</body>
</html>

非徹底脫離文檔流

左右結構div盒子重疊現象，通常是因爲相鄰兩個DIV一個使用浮動一個沒有使用浮動。一個使用浮動一個沒有致使DIV不是在同個「平面」上，但內容不會形成覆蓋現象，只有DIV造成覆蓋現象。orm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin: 0; } .r1{ width: 100px; height: 100px; background-color: #7A77C8;
 float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; } </style>
</head>
<body>

<div class="r1"></div>
<div class="r2">region2</div>




</body>
</html>

>>>>解決方法：要麼都不使用浮動；要麼都使用float浮動；要麼對沒有使用float浮動的DIV設置margin樣式。htm

父級坍塌現象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * { margin:0;padding:0; } .container{ border:1px solid red;width:300px; } #box1{
            background-color:green;float:left;width:100px;height:100px; } #box2{
            background-color:deeppink; float:right;width:100px;height:100px; } #box3{
             background-color:pink;height:40px; } </style>
</head>
<body>

        <div class="container">
                <div id="box1">box1 向左浮動</div>
                <div id="box2">box2 向右浮動</div>
        </div>
        <div id="box3">box3</div>
</body>
</body>
</html>

例子如上：.container和box3的佈局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個緣由是由於第一個大盒子裏的子元素使用了浮動，脫離了文檔流，致使.container沒有被撐開。box3認爲.container沒有高度（未被撐開），所以跑上去了。對象

>>>>解決方法：

一、固定高度

給.container設置固定高度，通常狀況下文字內容不肯定多少就不能設置固定高度，因此通常不能設置「.container」高度(固然能肯定內容多高，這種狀況下「.container是能夠設置一個高度便可解決覆蓋問題。

或者給.container加一個固定高度的子div：

<div class="container">
                <div id="box1">box1 向左浮動</div>
                <div id="box2">box2 向右浮動</div>
                <div id="empty" style="height: 100px"></div>
</div>
<div id="box3">box3</div>

可是這樣限定固定高度會使頁面操做不靈活，不推薦！

二、清除浮動(推薦)。

clear語法：
clear : none | left | right | both

取值：
none : 默認值。容許兩邊均可以有浮動對象
left : 不容許左邊有浮動對象
right : 不容許右邊有浮動對象
both : 不容許有浮動對象

可是須要注意的是：clear屬性只會對自身起做用，而不會影響其餘元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin: 0; } .r1{ width: 300px; height: 100px; background-color: #7A77C8;
 float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; float: left; clear: left; } .r3{ width: 100px; height: 200px; background-color: darkgreen; float: left; } </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>



</body>
</html>

把握住兩點：一、元素是從上到下、從左到右依次加載的。

二、clear: left;對自身起做用，一旦左邊有浮動元素，即切換到下一行來保證左邊元素不是浮動的，依據這一點解決父級塌陷問題。

思考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin: 0; } .r1{ width: 300px; height: 100px; background-color: #7A77C8;
 float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; float: left; clear: both; } .r3{ width: 100px; height: 200px; background-color: darkgreen; float: left; } </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>



</body>
</html>

解決父級塌陷：

''' .clearfix:after { <----在類名爲「clearfix」的元素內最後面加入內容； content: "."; <----內容爲「.」就是一個英文的句號而已。也能夠不寫。 display: block; <----加入的這個元素轉換爲塊級元素。 clear: both; <----清除左右兩邊浮動。 visibility: hidden; <----可見度設爲隱藏。注意它和display:none;是有區別的。 visibility:hidden;仍然佔據空間，只是看不到而已； line-height: 0; <----行高爲0； height: 0; <----高度爲0； font-size:0; <----字體大小爲0； } .clearfix { *zoom:1;} <----這是針對於IE6的，由於IE6不支持:after僞類，這個神 奇的zoom:1讓IE6的元素能夠清除浮動來包裹內部元素。 整段代碼就至關於在浮動元素後面跟了個寬高爲0的空div，而後設定它clear:both來達到清除浮動的效果。 之因此用它，是由於，你沒必要在html文件中寫入大量無心義的空標籤，又能清除浮動。 <div class="head clearfix"></div> '''

三、overflow:hidden

overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，可是他是浮動在普通流之上的，能夠把普通流元素+浮動元素想象成一個立方體。若是沒有明確設定包含容器高度的狀況下，它要計算內容的所有高度才能肯定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。