說明:css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動的六種方法</title>
<style> *{ padding: 0; margin: 0; } .wrap{ height: 300px;/*固定父元素的高度*/ } .box1,.box2{ width: 400px; height: 300px; float: left; } .box1{ background-color: yellow; } .box2{ background-color: deepskyblue; } .box3{ width: 900px; height: 200px; background-color: deeppink; } </style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
複製代碼
說明:html
clear屬性表示清除浮動元素對本身的影響bash
clear屬性有三個值,left,right,both,left表示清除本元素左邊浮動元素本身的影響,right表示清除本元素右邊浮動元素對本身的影響,both表示清除兩邊浮動元素對本身的影響,通常咱們使用both學習
該屬性通常寫在公共類中,使用時給須要的元素添加該類名便可ui
該方法有個致命的缺點就是:margin屬性部分失效spa
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動的六種方法</title>
<style> *{ padding: 0; margin: 0; } .box1,.box2{ width: 400px; height: 300px; float: left; } .box1{ background-color: yellow; } .box2{ background-color: deepskyblue; } .box3{ width: 900px; height: 200px; clear: both;/*清除浮動*/ background-color: deeppink; } </style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
複製代碼
clear:both直接加在想要清除影響的元素上會形成該元素margin值部分失效,可使用隔牆法firefox
外隔牆code
說明:htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動的六種方法</title>
<style> *{ padding: 0; margin: 0; } .box1,.box2{ width: 400px; height: 300px; float: left; } .box1{ background-color: yellow; } .box2{ background-color: deepskyblue; } .box3{ width: 900px; height: 200px; background-color: deeppink; } /*公共類*/ .clearfix{ clear: both; } .h20{ height: 20px; } </style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="clearfix h20"></div>
<div class="box3"></div>
</body>
</html>
複製代碼
內隔牆string
說明:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動的六種方法</title>
<style> *{ padding: 0; margin: 0; } .box1,.box2{ width: 400px; height: 300px; float: left; } .box1{ background-color: yellow; } .box2{ background-color: deepskyblue; } .box3{ width: 900px; height: 200px; background-color: deeppink; } /*公共類*/ .clearfix{ clear: both; } .h20{ height: 20px; } </style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="clearfix h20"></div>
</div>
<div class="box3"></div>
</body>
</html>
複製代碼
說明:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動的六種方法</title>
<style>
*{
padding: 0;
margin: 0;
}
.wrap{
overflow:hidden;
_zoom:1;/*兼容ie6*/
}
.box1,.box2{
width: 400px;
height: 300px;
float: left;
}
.box1{
background-color: yellow;
}
.box2{
background-color: deepskyblue;
}
.box3{
width: 900px;
height: 200px;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
複製代碼
說明:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動的六種方法</title>
<style> *{ padding: 0; margin: 0; } .clearfix:after{/*建議以公共類的形式出現*/ content: '.'; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE六、7 專有 */ .box1,.box2{ width: 400px; height: 300px; float: left; } .box1{ background-color: yellow; } .box2{ background-color: deepskyblue; } .box3{ width: 900px; height: 200px; background-color: deeppink; } </style>
</head>
<body>
<div class="wrap clearfix">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3 "></div>
</body>
</html>
複製代碼
說明:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動的六種方法</title>
<style> *{ padding: 0; margin: 0; } .clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1;/*ie6-7*/ } .box1,.box2{ width: 400px; height: 300px; float: left; } .box1{ background-color: yellow; } .box2{ background-color: deepskyblue; } .box3{ width: 900px; height: 200px; background-color: deeppink; } </style>
</head>
<body>
<div class="wrap clearfix">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3 "></div>
</body>
</html>
複製代碼