美文网首页前端面试题全汇总
前端面试题总结【19】:CSS浮动

前端面试题总结【19】:CSS浮动

作者: 前端老司机 | 来源:发表于2020-06-13 14:46 被阅读0次

    解释下浮动和它的工作原理?清除浮动的技巧

    浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

    1. 使用空标签清除浮动。
      这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

    2. 使用overflow
      给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6

    3. 使用after伪对象清除浮动。
      该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;

    可以给父元素设置overflow:auto或者hidden

    推荐:

    • 持续更新,致力于做一个持久的搬运工!
    • 下面是已经整理好的面试题PDF获取和相关进阶学习书籍资料地址,有需求戳一下
    • 2020前端面试题总结合集

    相关文章

      网友评论

        本文标题:前端面试题总结【19】:CSS浮动

        本文链接:https://www.haomeiwen.com/subject/uwnatktx.html