当我们使用float后,发现父级元素没有被撑开, 通常情况下需要清除浮动,以下介绍三种清除浮动的方法:
1. 使用overflow:hidden将元素变成BFC,即可清除内部浮动
<style> .box{ border: 10px solid #C0A16B; width: 300px; } .child{ width: 100px; height: 100px; float: left; border: 10px solid #AC2925; } </style> <body> <div class="box"> <div class="child"></div> <div class="child"></div> </div> </body>
.box{ overflow: hidden; }
为达到清除内部浮动,我们可以触发box生成BFC,那么box在计算高度时,box内部的浮动元素child也会参与计算。
2 . 伪元素
<style> .clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{ width: 300px; border: 10px solid #C0A16B; } .child{ width: 100px; height: 100px; float: left; border: 10px solid #AC2925; } </style> <body> <div class="clearfix"> <div class="child"></div> <div class="child"></div> </div> </body>
这个css的原理是经过使用after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个”.”,并且把他设置为块级元素(display=”block”);高度设置为0,clear=”both”,然后将其内容隐藏掉(visibility=”hidden”).这样就会撑开此块级元素。
ie下
.clearfix{ zoom:1; }
3 . 使用空标签
<style> .box{ width: 300px; border: 10px solid #C0A16B; } .child{ width: 100px; height: 100px; float: left; border: 10px solid #AC2925; } </style> <body> <div class="box"> <div class="child"></div> <div class="child"></div> <div style="clear: both;"></div> </div> </body>
在浮动标签的下添加一个空的兄弟元素,设置clear:both
欢迎分享本文,转载请保留出处:前端ABC » css之清除浮动的几种方法