每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。
面试官:清除浮动有哪些方式?
我:呃~,浮动元素会脱离文档流(绝对定位元素也会脱离文档流),导致无法计算准确的高度,这种问题称为:“高度塌陷”。
清除浮动常见的有以下三种方式,整出代码如下:
触发BFC:(有缺陷,会造成内容的溢出隐藏)
<style> *{margin: 0;padding: 0;} ul { list-style: none; border: 10px solid #ccc; overflow: hidden; /*触发BFC清除浮动*/ } ul li { width: 100px; height: 100px; background-color: #f00; float: left; } </style> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body>
登录后复制
多创建一个盒子,并添加样式:clear:both; :(不推荐使用,此方法已经过时)【