本文实验了常用的三个清除浮动的方法
- BFC
- 伪元素::after
- 空白标签法
注意:使用的父与子元素要为块元素
一. BFC
父级元素身上设置 overflow 值为hidden / auto
overflow:hidden;
/* overflow:auto; */
二. 伪元素::after
父级元素身上 使用伪元素,csss设置如下
ELement::after{
/*内容空白*/
content:'';
/*伪元素设置为块级元素*/
display:block;
/*清除左右浮动*/
clear:both;
}
三. 空白标签法
html标签中,父级内加入一个空白文本的块级元素,设置其css为clear:both
<div class='father'>
<div class='child'></div>
<div class='clear'></div>
</div>
div.clear{
clear:both;
}
效果演示:
CSS-float-清除浮动构建测试和发现前端特效动画代码的最佳场所,面向前端开发人员和设计人员的社交化动画开发平台。https://animpen.com/pen/QGaMwp