成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

清除浮動

zhisheng / 1892人閱讀

摘要：還有幾種亂七八糟的清除浮動方法，但是缺點多，故不提起，了解可參考

浮動的目的：把多個盒子放在一行上
清除浮動的目的：解決父盒子高度為0的問題
清除浮動，也稱閉合浮動
注：本文不兼容IE6

未清除浮動實現(xiàn)情況：

清除后：

原代碼：

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動title>
<style type="text/css">
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
style>
head>
<body>
<div class="content">
<div class="left">div>
<div class="right">div>
div>
body>
html>

?

具體方法：
1.額外標(biāo)簽法
在含浮動標(biāo)簽后加兄弟盒子清除浮動
例：

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動title>
<style type="text/css">
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
style>
head>
<body>
<div class="content">
<div class="left">div>
<div class="right">div>
<div class="clearbox">div>
div>
body>
html>


缺點：添加了許多空div

2.給父盒子overflow:hidden
觸發(fā)bfc模式（該名詞不懂請谷歌/百度，初學(xué)者可暫時略過)，直接清除浮動

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動title>
<style type="text/css">
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
overflow: hidden;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
style>
head>
<body>
<div class="content">
<div class="left">div>
<div class="right">div>
div>
body>
html>

缺點：不可與position屬性配合使用

3.偽元素法
給父元素定義偽類:after(此處使用的是公共類clearfix）

.clearfix:after{
content:"";/*內(nèi)容為空*/
visibility:hidden;/*將元素隱藏，但是在網(wǎng)頁中該占的位置還是占著*/
display:block;/*變成塊級元素*/
height:0;
clear:both;/*清除浮動*/
}

?

具體代碼：

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動title>
<style type="text/css">
.clearfix:after{
content:"";/*內(nèi)容為空*/
visibility:hidden;/*將元素隱藏，但是在網(wǎng)頁中該占的位置還是占著*/
display:block;/*變成塊級元素*/
height:0;
clear:both;/*清除浮動*/
}
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
style>
head>
<body>
<div class="content clearfix">
<div class="left">div>
<div class="right">div>
div>
body>
html>

?


缺點：IE8以上和非IE瀏覽器才支持

4.雙偽元素法
給父類加上偽類:before和:after

.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}

具體代碼：

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動title>
<style type="text/css">
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
style>
head>
<body>
<div class="content clearfix">
<div class="left">div>
<div class="right">div>
div>
body>
html>

附：
對于上述4種方法，優(yōu)先推薦方法3和4，當(dāng)然1和2也可，可根據(jù)具體情況使用。
還有幾種亂七八糟的清除浮動方法，但是缺點多，故不提起，了解可參考：
http://www.jb51.net/css/173023.html

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2241.html

相關(guān)文章

  • 關(guān)于浮動與清除浮動，你應(yīng)該知道的

    摘要：清除浮動并不是說讓浮動元素回到文檔流清除浮動只會改變改元素自身的位置，并且只針對排在該元素前面的元素。 我在做頁面布局的時候，多多少少總會受到來自浮動的困擾，因此專門通過實踐來總結(jié)一下浮動與清除浮動。 首先總結(jié)幾個基礎(chǔ)的概念： 浮動：設(shè)置浮動的元素會脫離文檔流，不會影響塊元素的布局，但是會影響內(nèi)聯(lián)元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會單個元素獨占一行 接下來我們通過實...

    mengbo 評論0 收藏0

  • 關(guān)于浮動與清除浮動，你應(yīng)該知道的

    摘要：清除浮動并不是說讓浮動元素回到文檔流清除浮動只會改變改元素自身的位置，并且只針對排在該元素前面的元素。 我在做頁面布局的時候，多多少少總會受到來自浮動的困擾，因此專門通過實踐來總結(jié)一下浮動與清除浮動。 首先總結(jié)幾個基礎(chǔ)的概念： 浮動：設(shè)置浮動的元素會脫離文檔流，不會影響塊元素的布局，但是會影響內(nèi)聯(lián)元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會單個元素獨占一行 接下來我們通過實...

    masturbator 評論0 收藏0

  • 關(guān)于浮動與清除浮動，你應(yīng)該知道的

    摘要：清除浮動并不是說讓浮動元素回到文檔流清除浮動只會改變改元素自身的位置，并且只針對排在該元素前面的元素。 我在做頁面布局的時候，多多少少總會受到來自浮動的困擾，因此專門通過實踐來總結(jié)一下浮動與清除浮動。 首先總結(jié)幾個基礎(chǔ)的概念： 浮動：設(shè)置浮動的元素會脫離文檔流，不會影響塊元素的布局，但是會影響內(nèi)聯(lián)元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會單個元素獨占一行 接下來我們通過實...

    Donald 評論0 收藏0

  • 關(guān)于浮動與清除浮動，你應(yīng)該知道的

    摘要：清除浮動并不是說讓浮動元素回到文檔流清除浮動只會改變改元素自身的位置，并且只針對排在該元素前面的元素。 我在做頁面布局的時候，多多少少總會受到來自浮動的困擾，因此專門通過實踐來總結(jié)一下浮動與清除浮動。 首先總結(jié)幾個基礎(chǔ)的概念： 浮動：設(shè)置浮動的元素會脫離文檔流，不會影響塊元素的布局，但是會影響內(nèi)聯(lián)元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會單個元素獨占一行 接下來我們通過實...

    ideaa 評論0 收藏0

  • 清除浮動的方法

    摘要：前言本文主要介紹清除浮動的種風(fēng)方法及利弊浮動對頁面的影響如果一個父級塊元素中的子元素浮動，那么所有浮動的子元素都脫離了文檔流，如果父元素?zé)o法確定高度，則其下面的兄弟元素會自動補位，造成視圖結(jié)構(gòu)混亂，所以這個時候要進行清除浮動。 前言： 本文主要介紹清除浮動的4種風(fēng)方法及利弊 浮動對頁面的影響： 如果一個父級塊元素中的子元素浮動，那么所有浮動的子元素都脫離了文檔流，如果父元素?zé)o法確定高度...

    Alex 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<