清除浮動

時間 2019-11-09

標籤清除浮動简体版

原文原文鏈接

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

未清除浮動實現狀況：html

清除後：瀏覽器

原代碼：spa

<!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.額外標籤法
在含浮動標籤後加兄弟盒子清除浮動
例：.net

<!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>

缺點：添加了許多空divcode

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

<!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屬性配合使用blog

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

.clearfix:after{
content:"";/*內容爲空*/
visibility:hidden;/*將元素隱藏，可是在網頁中該佔的位置仍是佔着*/
display:block;/*變成塊級元素*/
height:0;
clear:both;/*清除浮動*/
}

具體代碼：it

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動</title>
<style type="text/css">
.clearfix:after{
content:"";/*內容爲空*/
visibility:hidden;/*將元素隱藏，可是在網頁中該佔的位置仍是佔着*/
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種方法，優先推薦方法3和4，固然1和2也可，可根據具體狀況使用。還有幾種亂七八糟的清除浮動方法，可是缺點多，故不提起，瞭解可參考：http://www.jb51.net/css/173023.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。