HTML+CSS：css清除浮動(dòng)的幾種方式，哪種最合

HTML+CSS：css清除浮動(dòng)的幾種方式，哪種最合適？

篇文章我們說(shuō)了元素的浮動(dòng)，本篇文章主要介紹下css浮動(dòng)帶來(lái)的影響，以及如何清除浮動(dòng)。

細(xì)心的人可能發(fā)現(xiàn)了，在我們上篇文章寫(xiě)的導(dǎo)航條中存在一個(gè)問(wèn)題，那就是使用了float之后，父級(jí)盒子的高度變?yōu)?了。我們來(lái)寫(xiě)一個(gè)例子來(lái)看一下，創(chuàng)建一個(gè)父級(jí)div，并設(shè)置border屬性，然后下邊創(chuàng)建兩個(gè)子元素span，并設(shè)置浮動(dòng)。具體代碼如下所示：

由上圖可以看出，在給span添加了float之后，父級(jí)元素div的高度就變成了0。我們有以下幾種方式來(lái)解決這個(gè)問(wèn)題

（1）給父級(jí)元素單獨(dú)定義高度（height）

原理：如果父級(jí)元素沒(méi)有定義高度，父元素的高度完全由子元素?fù)伍_(kāi)時(shí)，父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無(wú)法自動(dòng)獲取到高度的問(wèn)題。

優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、容易掌握。

缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問(wèn)題。對(duì)于響應(yīng)式布局會(huì)有很大影響。

（2）在標(biāo)簽結(jié)尾處加空div標(biāo)簽 clear:both

原理：添加一個(gè)空div，利用css提高的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度。

優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問(wèn)題

缺點(diǎn)：不少初學(xué)者不理解原理；如果頁(yè)面浮動(dòng)布局多，就要增加很多空div，不利于頁(yè)面的優(yōu)化。

（3）父級(jí)div定義偽類(lèi):after 和 zoom

原理：元素生成偽類(lèi)的作用和效果相當(dāng)于方法2中的原理，但是IE8以上和非IE瀏覽器才支持:after，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動(dòng)問(wèn)題

優(yōu)點(diǎn)：瀏覽器支持好、不容易出現(xiàn)怪問(wèn)題，寫(xiě)法是固定的，不理解也可以直接復(fù)制使用；（小編大力推薦使用此種方法，簡(jiǎn)單便捷，只需添加一個(gè)class即可解決問(wèn)題）

缺點(diǎn)：css代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持。

（4）父級(jí)div定義 overflow:hidden

優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好

缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏。（不建議使用此種方式，可能會(huì)影響頁(yè)面元素布局）

好了，本篇文章就給大家說(shuō)到這里，大家自己下來(lái)可以這幾種方式都試一試，自己感覺(jué)下哪種更適合自己，小編一直使用的是第3種方式。

每日金句：這次本來(lái)可以咸魚(yú)翻身的，沒(méi)想到粘鍋了。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。

HTML 頁(yè)面布局中，浮動(dòng)元素被用于控制元素的相鄰位置，以水平或垂直方向上排版。了解如何正確使用 float 屬性將有助于您對(duì)頁(yè)面進(jìn)行精細(xì)控制。

水平浮動(dòng)

水平浮動(dòng)用于將元素排版并行。當(dāng)元素被設(shè)置為 float：left 或 float：right 時(shí)，它們就會(huì)在文檔流中垂直方向上緊縮，直到遇到相鄰的非浮動(dòng)元素或直到頁(yè)面底部。

垂直浮動(dòng)

垂直浮動(dòng)用于將元素垂直排列。當(dāng)元素被設(shè)置為 float：top 或 float：bottom 時(shí)，它們就會(huì)在文檔流中水平方向上緊縮，直到遇到相鄰的非浮動(dòng)元素或直到頁(yè)面右部。

清除浮動(dòng)

當(dāng)一個(gè)元素的浮動(dòng)效果覆蓋了其相鄰元素時(shí)，就會(huì)發(fā)生交叉疊加。為了避免這種情況，可以在浮動(dòng)元素的相鄰元素中添加 clear：both 屬性。

示例

html

<div> 
    <div style="float: left"> 
        左邊元素 
    </div> 
    <div style="float: right"> 
       右邊元素 
    </div> 
    <div style="clear: both"></div> 
</div>

結(jié)論

浮動(dòng)元素是頁(yè)面布局中強(qiáng)大的工具，可以水平或垂直方向上排列元素。通過(guò)正確使用 float 屬性，您可以根據(jù)要求對(duì)頁(yè)面進(jìn)行精細(xì)控制。

動(dòng)的清除

實(shí)驗(yàn)：現(xiàn)在有兩個(gè)div, div身上沒(méi)有任何屬性。每個(gè)div中都有l(wèi)i, 這些li都是浮動(dòng)的。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
li{
float: left;
width: 90px;
height: 40px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>
<div>
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語(yǔ)水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

我們本以為這些li, 會(huì)分為兩排, 但是, 第二組中的第1個(gè)li, 去貼靠第一組中的最后一個(gè)li了。

第二個(gè)div中的li, 去貼第一個(gè)div中最后一個(gè)li的邊了。

原因就是因?yàn)閐iv沒(méi)有高度, 不能給自己浮動(dòng)的孩子們, 一個(gè)容器。

清除浮動(dòng)方法1：給浮動(dòng)的元素的祖先元素加高度。缺陷: 只限于父元素高度確定的情況下。

如果一個(gè)元素要浮動(dòng), 那么它的祖先元素一定要有高度。高度的盒子, 才能關(guān)住浮動(dòng)。

解決方法:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
div{
height: 50px; /* 為父元素設(shè)置高度 */
border: 1px solid #000;
}
li{
float: left;
width: 90px;
height: 40px;
margin-right: 10px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>
<div>
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語(yǔ)水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

清除浮動(dòng)方法2：clear:both;

網(wǎng)頁(yè)制作中, 高度height很少出現(xiàn)。為什么? 因?yàn)槟鼙粌?nèi)容撐高! 那也就是說(shuō), 剛才我們講解的方法1, 工作中用的很少。

腦弄大開(kāi)：能不能不寫(xiě)height, 也把浮動(dòng)清除了呢? 也讓浮動(dòng)之間, 互不影響呢?

clear:both;

clear就是清除, both指的是左浮動(dòng)、右浮動(dòng)都要清除。意思就是：清除別人對(duì)我的影響。

這種方法有一個(gè)非常大的、致命的問(wèn)題, margin失效了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
li{
float: left;
width: 120px;
height: 40px;
text-align: center;
background-color: orange;
}
.box2{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>
<div class="box2">
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語(yǔ)水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

清除浮動(dòng)方法3：隔墻法

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h8{
height: 8px;
_font-size:0;
}
.h10{
height: 10px;
_font-size:0;
}
.h12{
height: 12px;
_font-size:0;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>

<div class="cl h8"></div>
<div class="box2">
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語(yǔ)水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

墻! <div class="cl h18"></div>

這個(gè)墻, 隔開(kāi)了兩部分浮動(dòng), 兩部分浮動(dòng), 互不影響。

近些年, 有演化出了"內(nèi)墻法"：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h16{
height: 16px;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
<div class="cl h16"></div>
</div>
<div class="box2">
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語(yǔ)水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

內(nèi)墻法本質(zhì)-給沒(méi)有高的父親撐出高

因?yàn)橐粋€(gè)父元素不可能被浮動(dòng)的子元素?fù)纬龈叨? 解決的方法：內(nèi)墻法

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
background-color: blue;
}
p{
float: left;
width: 100px;
height: 100px;
background-color: green;
}
.cl{ /* 如果沒(méi)有清除浮動(dòng) , 則父元素的盒子沒(méi)有高度, <div>盒子只是一條線(xiàn)*/
clear: both;
}
</style>
</head>
<body>
<div>
<p></p>
<div class="cl"></div>
</div>
</body>
</html>

清除浮動(dòng)方法4：overflow:hidden;

overflow就是"溢出"的意思, hidden就是"隱藏"的意思。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</div>
</body>
</html>

本意就是清除溢出到盒子外面的文字。但是, 前端開(kāi)發(fā)工程師又發(fā)現(xiàn)了, 能做偏方。

一個(gè)父親不能被自己浮動(dòng)的兒子，撐出高度。但是, 只要給父親加上overflow:hidden; 那么, 父親就能被兒子撐出高了。這是一個(gè)偏方。

div{
width: 400px;
border: 10px solid black;
overflow: hidden;
}

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
overflow: hidden;
border: 10px solid black;
}
.p1{
float: left;
width: 100px;
height: 150px;
background-color: red;
}
.p2{
float: left;
width: 100px;
height: 380px;
background-color: yellow;
}
.p3{
float: left;
width: 100px;
height: 120px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
</div>
</body>
</html>

浮動(dòng)清除方法5: 利用偽元素清除浮動(dòng)

在線(xiàn)咨詢(xún)

上一篇：神奇！明明是 socket，被我玩成了 http
下一篇：精選100套網(wǎng)頁(yè)模板，免費(fèi)獲取

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。