当前位置: 首页 > 面试题库 >

清除浮动的方法有哪些?

方博
2023-03-14
本文向大家介绍清除浮动的方法有哪些?相关面试题,主要包含被问及清除浮动的方法有哪些?时的应答技巧和注意事项,需要的朋友参考一下

参考回答:

方法一:使用带clear属性的空元素

在浮动元素后使用一个空元素如

,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用

来进行清理。

方法二:使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。

方法三:给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。

方法四:使用邻接元素处理

什么都不做,给浮动元素后面的元素添加clear属性。

方法五:使用CSS的:after伪元素

结合:after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。

参考https://www.cnblogs.com/ForEvErNoME/p/3383539.html

 

 类似资料:
  • 本文向大家介绍bootstrap清除浮动的方法?相关面试题,主要包含被问及bootstrap清除浮动的方法?时的应答技巧和注意事项,需要的朋友参考一下 :after伪类在元素末尾插入了一个包含空格的字符,并设置display为table display:table会创建一个匿名的table-cell,从而触发块级上下文(BFC),因为容器内float的元素也是BFC,由于BFC有不能互相重叠的特性

  • 本文向大家介绍清除浮动的方式有哪些及优缺点?相关面试题,主要包含被问及清除浮动的方式有哪些及优缺点?时的应答技巧和注意事项,需要的朋友参考一下 这个问题刚好有思考整理过,今天刚好复习一下。 原文链接:https://xiangshuo.blog.csdn.net/article/details/52749993 回答前的唠叨: 在现在的实际工作当中我已经很少用浮动来布局了,真的很少,刚开始学习的时

  • 本文向大家介绍CSS清除浮动方法汇总,包括了CSS清除浮动方法汇总的使用技巧和注意事项,需要的朋友参考一下 清除浮动

  • 问题内容: 我有一个清单,李的有一个。之后的内容应正确对齐。 我认为,可以通过使用:after这样的伪选择器来删除。 我是否总是需要创建一个单独的div来清除浮动元素? 问题答案: 这样写:

  • 本文向大家介绍清楚浮动的几种方法,各自的优缺点相关面试题,主要包含被问及清楚浮动的几种方法,各自的优缺点时的应答技巧和注意事项,需要的朋友参考一下 1.父级div定义伪类:after和zoom 原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题。 优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,

  • 本文向大家介绍table去除边框的方法有哪些?相关面试题,主要包含被问及table去除边框的方法有哪些?时的应答技巧和注意事项,需要的朋友参考一下