清除浮动总结
浮动
-
不占文档流
-
浮动只会影响后面的文档流
-
给父元素不添加高度加浮动会导致父元素没有高度，想要父元素不加高度子元素可以使用浮动，且不影响下面的文档流，就需要清除浮动
-
额外标签法清除浮动
<style> li{ float:left; } .clear { clear:both; } </style> <body> <div> <ul> <li>1111</li> <li>22222</li> <div class='clear'></div> </ul> </div> </body> -
给父级元素添加 overflow （子不教父之过） overflow：hidden
- 缺点：无法显示出溢出的部分
- 优点：代码简洁
-
：after 伪元素 也是给父元素添加的 *
.clearfix:after{ content:''; display:block; clear:both; visiblity:hidden; }- 优点：结构简单，代码简洁
- 缺点：照顾低版本浏览器
-
父级双伪元素 也是给父元素添加的 *
.clearfix:before,.clearfix:after{ content:'', display:table; } .clearfix{ clear:both; } .alearfix{ *zoom:1 }- 优点：结构简单，代码简洁
- 缺点：照顾低版本浏览器
-
本文作者：张尊娟
本文链接：https://www.cnblogs.com/wszzj/p/14917203.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步