1 常见用完浮动之后的问题举例
代码:
<style>
.box{
margin: 100px 100px;
padding: 2px 4px 2px 2px;
width: 500px;
height: 200px;
border: 2px solid palevioletred;
overflow: hidden;
}
.w{
width: 100%;
margin: 0 auto;
border: 2px solid green;
}
.left{
float: left;
margin: 10px 10px;
}
.right{
float: right;
margin: 10px 10px;
}
</style>
<div class="box">
<div class="w">
<button class="left">哈喽</button>
<button class="right">再见</button>
</div>
</div>
运行结果:
2 分析问题并清除浮动
分析:
两个button使用了float,其父级元素的高度变为0(结果中的绿线),所以需要在父级元素中清除元素的浮动。
清除浮动的方法:
给父级盒子添加伪类 :after清除浮动,这种方法不兼容IE浏览器,所以需设置zoom属性。
修改上述代码:
在style标签中添加清除浮动的css代码:
<style>
.box{
margin: 100px 100px;
padding: 2px 4px 2px 2px;
width: 500px;
height: 200px;
border: 2px solid palevioletred;
overflow: hidden;
}
.w{
width: 100%;
margin: 2px auto;
border: 2px solid green;
zoom: 1; /*清除浮动兼容低版本IE浏览器*/
}
/*添加伪类清除浮动*/
.w::after{
content: "";
display: block;
clear: both;
height: 0;
}
.left{
float: left;
margin: 10px 10px;
}
.right{
float: right;
margin: 10px 10px;
}
</style>
结果: