Rumah > Artikel > hujung hadapan web > 清除浮动有哪些方法及优缺点
清除浮动有哪些方法及优缺点
- 一个新手asal
- 2017-09-23 10:23:132132semak imbas
为什么要清除浮动？
下面的例子是浮动对元素的影响
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.box2 {
width: 100px;
height: 40px;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1">
<p class="box2"></p>
</p>
<p class="box3"></p></body></html>box2加入float: left属性后的结果如下
如图所示，由于box1未设置高度，box3自动补位，如果这样的话，页面就会混乱。所以，我们需要清除这种浮动
以下是清除浮动的几种方法
（1）clear: both
通过给浮动元素下添加p标签并设置clear: both属性
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.clear {
clear: both;
}
.box2 {
width: 100px;
height: 40px;
float: left;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1">
<p class="box2"></p>
<p class="clear"></p>
</p>
<p class="box3"></p></body></html>优点：简单、代码少、浏览器支持好
缺点：增加了无意义的标签
（2）overflow: hidden
通过给浮动元素的父元素添加overflow: hidden属性来清除浮动
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.clear {
overflow: hidden;
zoom: 1; /*处理兼容性问题*/
}
.box2 {
width: 100px;
height: 40px;
float: left;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1 clear">
<p class="box2"></p>
</p>
<p class="box3"></p></body></html>优点： 简单、代码少、浏览器支持好
缺点：超出的内容会被隐藏
（3）加入after伪类
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.clear:after {
clear: both;
content: "";
display: block;
visibility: hidden;
}
.box2 {
width: 100px;
height: 40px;
float: left;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1 clear">
<p class="box2"></p>
</p>
<p class="box3"></p></body></html>优点：浏览器支持好
缺点：代码多
第三种方法是现在许多浏览器所用的方法，所以清除浮动时最好用after伪类
Atas ialah kandungan terperinci 清除浮动有哪些方法及优缺点 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Javascript中刷新页面的示例详解Artikel seterusnya：JavaScript随机生成一定位数的密码的实现方法