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

清除浮动的方式有哪些及优缺点?

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

这个问题刚好有思考整理过,今天刚好复习一下。
原文链接:https://xiangshuo.blog.csdn.net/article/details/52749993

回答前的唠叨:

  • 在现在的实际工作当中我已经很少用浮动来布局了,真的很少,刚开始学习的时候用的还蛮多,现在Flex布局,标准文档流以及 定位 已经可以满足大部分的布局需求了。
  • 浮动带来的问题是盒子塌陷问题,所以我们就来解决这个问题吧

什么是盒子塌陷?
外部盒子本应该包裹住内部的浮动盒子,结果却没有。

问题出现的原因
父元素只包含浮动元素,那么它的高度就会塌缩为零(前提就是你们没有设置高度(height)属性,或者设置了为auto,就会出现这种情况,如果父元素不包含任何的可见背景,这个问题会很难被注意到。
因为子元素设置了float属性,而float属性会把元素从标准文档流中抽离,直接结果就是外部盒子丢了两个孩子,因为内部没有其它盒子了,所以外部盒子只包裹文本节点内容,却把两个内部盒子扔在外面了。

解决方案

  1. 上面分析了问题出现的原因,不难找到第一种解决方案(既然孩子丢了,那就去找呗)——给外部盒子也添加浮动

把外部盒子也从标准文档流中抽离,让它和孩子们见面。
缺点:可读性差,不易于维护(别人很难理解为什么要给父元素也添上float),而且可能需要调整整个页面布局。

  1. 在外部盒子内最下方添上带clear属性的空盒子

可以是div也可以是其它块级元素,把 <div style="clear:both;"></div>放在盒内底部,用最下面的空盒子清除浮动,把盒子重新撑起来。
缺点:引入了冗余元素

  1. 用overflow:hidden清除浮动
    给外部盒子添上这个属性就好了,非常简单。
    缺点:有可能造成溢出元素不可见,影响展示效果。

  2. 用after伪元素清除浮动
    给外部盒子的after伪元素设置clear属性,再隐藏它
    这其实是对空盒子方案的改进,一种纯CSS的解决方案,不用引入冗余元素。

.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}

这也是bootstrap框架采用的清除浮动的方法

题外话

其实还有一种最直接的办法:给每个盒子规定width和height,要多大给多大即可。但这并不算什么解决方案,因为这样的布局不是内容自适应的,但如果页面内容极少发生变动,这也是一个不错的方案,因为它的兼容性是毋庸置疑的。

 类似资料:
  • 本文向大家介绍清除浮动的方法有哪些?相关面试题,主要包含被问及清除浮动的方法有哪些?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: 方法一:使用带clear属性的空元素 在浮动元素后使用一个空元素如 ,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用 或 来进行清理。 方法二:使用CSS的overflow属性 给浮动元素的容器添加overflow:hidde

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

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

  • 主要内容:Python的优点,Python 的缺点Python 是一种开源的解释型脚本编程语言,它之所以非常流行,主要有三点原因: Python 简单易用,学习成本低,看起来非常优雅干净; Python 标准库和第三库众多,功能强大,既可以开发小工具,也可以开发企业级应用; Python 站在了人工智能和大数据的风口上,站在风口上,猪都能飞起来。 举个简单的例子来说明一下 Python 的简单: 比如要实现某个功能,C语言可能需要 100 行代码

  • 本文向大家介绍iframe框架都有哪些优缺点?相关面试题,主要包含被问及iframe框架都有哪些优缺点?时的应答技巧和注意事项,需要的朋友参考一下 优点: 可以实现异步刷新,单个 刷新不影响整体窗口的刷新(可以实现无刷新上传,在 无法使用时) 可以实现跨域,每个 的源都可以不相同(方便引入第三方内容) 多页面应用时,对于共同的 , 可以使用 加载,拆分代码(导航栏的应用) 缺点: 每一个 都对应着

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