浮动中会出现一些缺陷,盒子不能撑开,背景不能完全显示,布局错乱,那么可以通过以下方法解决:
1.css3的用法,给父元素设置伪类:
<div class="clear">
<div style="float: left; height:80px...其他样式属性"></div>
</div>
```css
<style>
.clear::after{
display: block;
clear: both;
height: 0;
content: "";//content的值空或者点
overflow: hidden;
}
</style>
2.给父元素设置固定高度
<div style="height:80px">
<div style="float: left; height:80px...其他样式属性"></div>
</div>
3.在子元素里添加一个空的div,设置样式 clear: both;
<div>
<div style="float: left;...其他样式属性"></div>
<div style="clear: both;"></div>
</div>
浮动布局缺陷修复技巧
本文详细介绍了使用CSS解决浮动布局中出现的盒子无法撑开、背景显示不全及布局错乱等问题的方法,包括利用CSS3伪类、设置父元素固定高度和在子元素后添加清浮动div等实用技巧。
642

被折叠的 条评论
为什么被折叠?



