清除浮動(dòng)

zhisheng 發(fā)布于2019-04-23 13:42 / 1889人閱讀

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

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

未清除浮動(dòng)實(shí)現(xiàn)情況：

清除后：

原代碼：

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動(dòng)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)簽法
在含浮動(dòng)標(biāo)簽后加兄弟盒子清除浮動(dòng)
例：

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動(dòng)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>

缺點(diǎn)：添加了許多空div

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

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動(dòng)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>

缺點(diǎn)：不可與position屬性配合使用

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

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

具體代碼：

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動(dòng)title>
<style type="text/css">
.clearfix:after{
content:"";/*內(nèi)容為空*/
visibility:hidden;/*將元素隱藏，但是在網(wǎng)頁中該占的位置還是占著*/
display:block;/*變成塊級(jí)元素*/
height:0;
clear:both;/*清除浮動(dòng)*/
}
.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>

缺點(diǎn)：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>清除浮動(dòng)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>