CSS3 清除浮动
三个div,父级div下面有两个div分别float:left和float:right
<style>
.container{width:400px;border:3px soild red;}
.fl{float:left;}
.fr{float:right;}
</style>
<body>
<div class="container">
<div class="fl">向左浮动</div>
<div class="fr">向右浮动</div>
</div>
</body>
副作用:
-
背景不能显示 由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。
-
边框不能撑开 如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。
-
margin padding设置值不能正确显示 由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
解决方法:
- 子div末尾加上
<div style="clear:both"></div>
2、父div加上overflow:hidden属性。(由于overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。推荐使用)