3種CSS清除浮動的方法

天這篇文章給大家介紹3種CSS清除浮動的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

首先，這里就不講為什么我們要清楚浮動，反正不清除浮動事多多。

下面我就講3種常用清除浮動的方法，夠用了。

1、在浮動元素后面加一個空的div，并為它清除浮動

html代碼：

<div class="wrap">   <div class="float">浮動</div>   <div class="clear"></div>   <div class="nofloat">不想被浮動影響</div></div>

css代碼：

.wrap{  width:500px;  height:400px;  border:1px solid red;  margin:0 auto;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}.nofloat{    width:300px;    height:150px;    background:red;}

現(xiàn)在雖然加了一個空的div，但是并沒有給它清除浮動，所以目前的效果就是第三個子元素.nofloat還是收到浮動的影響。

OK，現(xiàn)在給.clear加上清除浮動：

.clear{    clear:both;}

刷新一下效果就出來了：

PS：這種情況比較適合元素之間是垂直排列布局的，為了不受彼此浮動的影響。

2、利用BFC特性清除浮動

html代碼：

<div class="wrap">   <div class="float">浮動</div>   <div class="nofloat">不想被浮動影響</div></div>

css代碼：

.wrap{  width:500px;  border:1px solid red;  margin:0 auto;  overflow:hidden;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}.nofloat{    width:300px;    height:150px;    background:red;    overflow:hidden;}

效果是這樣的：

這里父容器是沒有設(shè)置固定高度的，本來第一個子元素浮動之后，父元素的高度會塌陷到跟第二個子元素一樣高，但由于這里分別給第二個子元素和父元素都設(shè)置了overflow:hidden ，所以它們都生成了一個新的BFC區(qū)域，根據(jù)上文提供的BFC布局規(guī)則可以得知：BFC區(qū)域不會與float box 重疊；計算BFC高度時浮動元素的高度也參與計算。

所以就得到清除浮動的效果。說得比較繞，但其實清除浮動得根據(jù)自己開發(fā)中的實際情況合理使用。

3、使用：after偽元素，給浮動元素的父元素清除浮動

html代碼：

<div class="wrap">   <div class="float">浮動</div></div>

css代碼：

.wrap{  width:500px;  border:1px solid red;  margin:0 auto;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}

此時子元素浮動了，脫離了文檔流，所以父元素高度酒塌陷了：

可以看到父元素的邊框擠在一起了。

OK，現(xiàn)在給父元素添加一個clearfix類：

<div class="wrap clearfix">   <div class="float">浮動</div></div>

.clearfix{    *zoom:1;}.clearfix:after{    content:'clear';    display:block;    height:0;    clear:both;    overflow:hidden;    visibility:hidden;}

現(xiàn)在刷新后的效果就是：

這種方法和BFC清除浮動個人用的比較多，實際開發(fā)中，其實這兩種就夠用了。

好的，清除浮動我也就簡單地提到這里！

以上就是CSS清除浮動的幾種方法的詳細(xì)內(nèi)容。如果有什么錯誤的話，歡迎留言指正。

動的清除

實驗：現(xiàn)在有兩個div, div身上沒有任何屬性。每個div中都有l(wèi)i, 這些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>設(shè)計模式</li>
</ul>
</div>
<div>
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

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

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

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

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

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

解決方法:

<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è)計模式</li>
</ul>
</div>
<div>
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

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

網(wǎng)頁制作中, 高度height很少出現(xiàn)。為什么? 因為能被內(nèi)容撐高! 那也就是說, 剛才我們講解的方法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>設(shè)計模式</li>
</ul>
</div>
<div class="box2">
<ul>
<li>學(xué)習(xí)方法</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>設(shè)計模式</li>
</ul>
</div>

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

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

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

近些年, 有演化出了"內(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è)計模式</li>
</ul>
<div class="cl h16"></div>
</div>
<div class="box2">
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

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

因為一個父元素不可能被浮動的子元素?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{ /* 如果沒有清除浮動 , 則父元素的盒子沒有高度, <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>內(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>

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

一個父親不能被自己浮動的兒子，撐出高度。但是, 只要給父親加上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: 利用偽元素清除浮動

天在跟一位強迫癥網(wǎng)友聊天時，對方稱自己買了在線視頻網(wǎng)的會員，在欣賞高清大片時總覺得右上角的水印很是礙眼，檔住了部分畫面還影響觀看體驗，問有沒有方法能把這個水印去掉。

其實在線視頻網(wǎng)站這種技術(shù)就是在播放視頻時，在瀏覽器的后臺里執(zhí)行了一小段JS代碼把自家的LOGO水印加上去的，我們完全也可以用一段JS代碼再它去掉。如果也有小伙伴嫌水印礙眼的話，請往下看。

打開你要播放的視頻頁，右鍵點擊頁面選審查元素或是直接在瀏覽器里按F12，然后點擊Console（控制臺），把下面的代碼粘貼到里，按下回車，就會發(fā)現(xiàn)畫面上的水印已經(jīng)不在了。

來看下效果

去除前

去除后

用這種方法去掉的水印，你可以連續(xù)播放或是切換集數(shù)都不會再出現(xiàn)水印，但只要你一刷新瀏覽器水印就會出來了。那時再按上述辦法操作一遍即可，如果還嫌麻煩，你可以把這段代碼加入到收藏夾里。

點開一個空白的網(wǎng)頁，點收藏，然后把網(wǎng)址修改成這段JS代碼，以后用的時候直接點下收藏夾就運行了。

去水印JS代碼：

var myCss= document.createElement('style'); myCss.innerHTML ='.txp_waterMark_pic,.logo-new,.iqp-logo-box{display:none!important;}';document.body.appendChild(myCss);void(0);

如果本文給您帶來了幫助，歡迎點贊收藏并轉(zhuǎn)發(fā)！

在線咨詢

上一篇：前端設(shè)計- JavaScript驗證碼制作及實例分析
下一篇：H5棋牌百問百答-做H5棋牌項目必讀！

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

3種CSS清除浮動的方法

您的項目需求