清除浮动
程序员文章站
2024-01-29 11:53:40
...
1.关于清除浮动有一个相关的元素：clear
2.它的作用：规定元素的某侧不允许存在浮动元素
3.应用：清除其他浮动元素对其产生的影响
4.它对应的值：
| both | 两侧都不允许存在浮动元素 |
| left | 清除元素左侧的浮动元素 |
| right | 清除元素右侧的浮动元素 |
| none | 无清除效果(默认值) |
5.解决实际中的应用：
问题描述：父元素中只包含浮动元素，那么在未设置高度的同时，则父元素高度就会塌陷为零
解决办法：
1.直接给父元素设置：overflow:hidden
2.给父元素添加一个css样式类：
.clearfix{zoom:1 ;} //这是为了兼容IE浏览器
.clearfix :after{content:“.”;//:after伪对象选择符---这个对象被渲染后添加一定的内容
display:block;//添加进去的内容转换为块状元素
visibility:hidden ;//将元素设置为不可见，但无论是否可见，都保留其物理空间
height:0;//将添加进去的内容高度设置为0，清除其占位
clear:both；//将添加进去的内容作为清除浮动的对象，实现外围容器中有内容存在
}
3.在父级元素中，浮动元素的后面加一个空的div,并给它设置clear:both,
//css部分
<style>
.boss{
border:3px solid green;
}
.l{
width:200px;
height:200px;
background:purple;
float:left;
}
.r{
width:200px;
height:200px;
background:red;
float:right;
}
.extra{
clear:both;
}
</style>//HTML部分
<body>
<div>
<div class="boss">
<div class="l">
左边
</div>
<div class="r">
右边
</div>
<div class="extra"></div>
</div>
</div>
<script type="text/javascript">
</script>
</body>最终效果：
上一篇： 栈的顺序存储结构