天這篇文章給大家介紹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ā)!
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。