1: 给高度塌陷的元素设置 overflow:hidden;
原理: 因为 overflow:hidden; 触发了一个 BFC
BFC 布局规则: 计算 BFC 高度的时候, 里面的浮动元素也参与计算.
弊端: 定位在当前元素外面的内容会被隐藏.
2: 给出现高度塌陷的元素里面, 放在浮动元素的后面, 添加一个空 div, 并且给 div{clear:both;}
原理: clear:both; 忽略上面的浮动元素预留出的空间
弊端: 形成不必要的空标签, 代码冗余
3: 万能清除法:
选择符 (高度塌陷的元素):after{
- content:".";
- display:block;
- height:0;
- clear:both;
- overflow:hidden;
- visibility:hidden;
- }
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/7bca465a4c75