源码论坛,商业源码下载,尽在锦尚中国商业源码论坛
标题:
子元素浮动导致父元素坍塌的原因和规避方法
[打印本页]
作者:
洪七公
时间:
2023-11-1 11:14
标题:
子元素浮动导致父元素坍塌的原因和规避方法
说得那么玄幻,实际就是几个div上下排列,如果没有设置高度,下面的div就会挤上来的意思,使之页面错位
那么消除不设置高度而引起的上下盒子错位的方法有什么呢?那就需要清除元素的浮动,方法有下面几个:
1 给父元素设置高度
2 额外标签法 :在最后添加一个块级元素的盒子 . .clear{clear:both;}
3 单伪元素清除法(京东)
.clearfix::after{
content:'';
display:block;
clear:both;
height:0;
visibility:hidden;
}
4 双伪元素清除法(小米)
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
5 给父元素设置 overflow: hidden;
我一般是选择第5种方法,简单方便!
欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/)
Powered by Discuz! X3.3