清除浮动的方法
-
给父盒子直接设置固定高度, 父盒子不再由子盒子撑起
缺点：需要提前算好父盒子的高度，实际开发很多时候都是不会直接设置父盒子高度的，而是由内容撑起 -
给父盒子的子元素最后增加一个
div标签，并设置样式为clear:both
缺点： 多加CSS样式和HTML标签
image.png
-
父盒子div增加CSS样式
overflow:hidden
优点： 简单、代码少、浏览器支持好
缺点： 不能和position配合使用，因为超出的尺寸的会被隐藏。（不建议使用此种方式，可能会影响页面元素布局）
父盒子添加overflow:hidden
- 父级div定义 伪类
:after和zoom（常用)
原理： 元素生成伪类的作用和效果相当于方法2中的原理，但是IE8以上和非IE浏览器才支持:after，ie6,ie7使用zoom(IE转有属性)解决浮动问题
优点： 浏览器支持好、不容易出现怪问题，写法固定，可以直接复制添加到全局样式，在需要使用的的地方直接添加一个class即可解决
伪类:after和zoom
文中有不足或者读者有疑问或更好的见解，欢迎留言讨论。
如果觉得该篇文章对您有帮助，别忘了留下您的足迹，点个赞❤噢
网友评论