HTML+CSS：css清除浮動的幾種方式，哪種最合

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

篇文章我們說了元素的浮動，本篇文章主要介紹下css浮動帶來的影響，以及如何清除浮動。

細心的人可能發現了，在我們上篇文章寫的導航條中存在一個問題，那就是使用了float之后，父級盒子的高度變為0了。我們來寫一個例子來看一下，創建一個父級div，并設置border屬性，然后下邊創建兩個子元素span，并設置浮動。具體代碼如下所示：

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

（1）給父級元素單獨定義高度（height）

原理：如果父級元素沒有定義高度，父元素的高度完全由子元素撐開時，父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優點：簡單、代碼少、容易掌握。

缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題。對于響應式布局會有很大影響。

（2）在標簽結尾處加空div標簽 clear:both

原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度。

優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題

缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，不利于頁面的優化。

（3）父級div定義偽類:after 和 zoom

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

優點：瀏覽器支持好、不容易出現怪問題，寫法是固定的，不理解也可以直接復制使用；（小編大力推薦使用此種方法，簡單便捷，只需添加一個class即可解決問題）

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

（4）父級div定義 overflow:hidden

優點：簡單、代碼少、瀏覽器支持好

缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。（不建議使用此種方式，可能會影響頁面元素布局）

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

每日金句：這次本來可以咸魚翻身的，沒想到粘鍋了。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

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

水平浮動

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

垂直浮動

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

清除浮動

當一個元素的浮動效果覆蓋了其相鄰元素時，就會發生交叉疊加。為了避免這種情況，可以在浮動元素的相鄰元素中添加 clear：both 屬性。

示例

html

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

結論

浮動元素是頁面布局中強大的工具，可以水平或垂直方向上排列元素。通過正確使用 float 屬性，您可以根據要求對頁面進行精細控制。

動的清除

實驗：現在有兩個div, div身上沒有任何屬性。每個div中都有li, 這些li都是浮動的。

<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>設計模式</li>
</ul>
</div>
<div>
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

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

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

原因就是因為div沒有高度, 不能給自己浮動的孩子們, 一個容器。

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

如果一個元素要浮動, 那么它的祖先元素一定要有高度。高度的盒子, 才能關住浮動。

解決方法:

<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; /* 為父元素設置高度 */
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>設計模式</li>
</ul>
</div>
<div>
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

清除浮動方法2：clear:both;

網頁制作中, 高度height很少出現。為什么? 因為能被內容撐高! 那也就是說, 剛才我們講解的方法1, 工作中用的很少。

腦弄大開：能不能不寫height, 也把浮動清除了呢? 也讓浮動之間, 互不影響呢?

clear:both;

clear就是清除, both指的是左浮動、右浮動都要清除。意思就是：清除別人對我的影響。

這種方法有一個非常大的、致命的問題, 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>設計模式</li>
</ul>
</div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

清除浮動方法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>設計模式</li>
</ul>
</div>

<div class="cl h8"></div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

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

這個墻, 隔開了兩部分浮動, 兩部分浮動, 互不影響。

近些年, 有演化出了"內墻法"：

<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>設計模式</li>
</ul>
<div class="cl h16"></div>
</div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

內墻法本質-給沒有高的父親撐出高

因為一個父元素不可能被浮動的子元素撐出高度, 解決的方法：內墻法

<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{ /* 如果沒有清除浮動 , 則父元素的盒子沒有高度, <div>盒子只是一條線*/
clear: both;
}
</style>
</head>
<body>
<div>
<p></p>
<div class="cl"></div>
</div>
</body>
</html>

清除浮動方法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>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
</body>
</html>

本意就是清除溢出到盒子外面的文字。但是, 前端開發工程師又發現了, 能做偏方。

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

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>

浮動清除方法5: 利用偽元素清除浮動

在線咨詢

上一篇：神奇！明明是 socket，被我玩成了 http
下一篇：精選100套網頁模板，免費獲取

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。