问题:
父级元素不给高度,子元素浮动,会造成父元素高度塌陷
解决办法:
1: 给父元素添加高度 height:;
缺点: 不灵活
2: 给父级元素添加overfow:hidden;(触发了一个bfc区域)
缺点: 定位出去的元素将会被隐藏
3: 给浮动元素的 最后 面添加一个空标签(块级元素)
空标签的样式:
width: 0;
height: 0;
clear: left/right/both; 左/右/都干掉
缺点: 代码冗余
4: 万能清除法
visibility:显示隐藏;
hidden 隐藏
visible 显示
.clearFixed:after{
content:"";
display:block;
width:0;
height:0;
overflow:hidden;
visibility:hidden;
clear:both;
}
注:visibility:hidden; 与 display:none;的区别
1: 都是隐藏
2: 前者隐藏时占据文档流,后者隐藏时脱离文档流
浮动元素造成的父级高度塌陷
最新推荐文章于 2024-08-23 10:53:05 发布