前端面试必问--盒子模型布局

清除浮动的方法

1. 给父盒子直接设置固定高度, 父盒子不再由子盒子撑起
   缺点：需要提前算好父盒子的高度，实际开发很多时候都是不会直接设置父盒子高度的，而是由内容撑起

2. 给父盒子的子元素最后增加一个div标签，并设置样式为clear:both
缺点： 多加CSS样式和HTML标签
   

   image.png

3. 父盒子div增加CSS样式 overflow:hidden
优点： 简单、代码少、浏览器支持好
   缺点： 不能和position配合使用，因为超出的尺寸的会被隐藏。（不建议使用此种方式，可能会影响页面元素布局）
   父盒子添加overflow:hidden

4. 父级div定义 伪类:after 和 zoom （常用)
   原理： 元素生成伪类的作用和效果相当于方法2中的原理，但是IE8以上和非IE浏览器才支持:after，ie6,ie7使用zoom(IE转有属性)解决浮动问题
   优点： 浏览器支持好、不容易出现怪问题，写法固定，可以直接复制添加到全局样式，在需要使用的的地方直接添加一个class即可解决

伪类:after和zoom

  文中有不足或者读者有疑问或更好的见解，欢迎留言讨论。
  如果觉得该篇文章对您有帮助，别忘了留下您的足迹，点个赞❤噢