博客
关于我
清除浮动的五种方法
阅读量:788 次
发布时间:2019-03-24

本文共 829 字,大约阅读时间需要 2 分钟。

清除浮动,主要是解决浮动与浮动之间相互干扰的问题。以下图中,第二组第一个li元素试图贴靠第一组最后一个li,原本预期的效果是li元素按照两排排列,但实际上未能实现。这一切的根本原因就藏在li的父亲div上,它没有设置高度,导致这两个div的高度均为0px。

div的高度为零意味着它没有能力撑起自身的浮动子元素,形成一个可容纳子元素的容器。浮动与浮动直接接触时,如果父容器高度没有被设置,浏览器无法为子元素预留必要的空间。此时,无法实现预期的布局效果。

在处理这一问题时,有多种方法可以尝试,比如:

方法1:给浮动元素的祖先元素加高度

这虽然有用,但通常不推荐,因为自动高度调节比固定高度更灵活。

方法2:使用 clear:both;

该属性可以清除父亲和子元素的浮动,但会导致该标签 margin属性失效,因为它无法正确计算高度差。

方法3:采用外墙法

在两个浮动元素之间添加一个div,并在这个div中使用clear: both;。同时赋予该div适当的height吗,类似于像一个"墙壁"隔离两个浮动元素。

但外墙法最大的缺陷是,添加的内墙并不能为左右浮动提供高度的支撑,动态内容无法自适应高度。

方法4:使用内墙法(最优选择)

与外墙法不同,内墙法允许父容器高度按需递增。即使不设置固定高度,也能为子内容留出合理的空间。

方法5:设置 overflow:hidden;(高推荐)

cyclesDatasets曾经的直觉发现,设置overflow:hidden;可以在不影响运算式的前提下,使子元素能够获得所需的高度。这种方法常用于快速布局解决方案,其中父容器的尺寸足够容纳子内容,且不会因为子浮动而影响整体布局。

总之,要解决浮动被干扰的问题,关键要让容器具备可信的高度。

  • 指定容器的高度,可以在浏览器中复制粘贴或者通过弗拉特克斯设计工具。

  • 不要允许容器宽度或高度为auto值时存在浮动元素。

  • 选择最合适的清浮方式,根据具体场景平衡灵活性与特定需求。

转载地址:http://fomkk.baihongyu.com/

你可能感兴趣的文章
mysql中json_extract的使用方法
查看>>
mysql中kill掉所有锁表的进程
查看>>
mysql中like % %模糊查询
查看>>
MySql中mvcc学习记录
查看>>
mysql中null和空字符串的区别与问题!
查看>>
MySQL中ON DUPLICATE KEY UPDATE的介绍与使用、批量更新、存在即更新不存在则插入
查看>>
MYSQL中TINYINT的取值范围
查看>>
MySQL中UPDATE语句的神奇技巧,让你操作数据库如虎添翼!
查看>>
Mysql中varchar类型数字排序不对踩坑记录
查看>>
MySQL中一条SQL语句到底是如何执行的呢?
查看>>
MySQL中你必须知道的10件事,1.5万字!
查看>>
MySQL中使用IN()查询到底走不走索引?
查看>>
Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
查看>>
MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
查看>>
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
查看>>
Mysql中各类锁的机制图文详细解析(全)
查看>>
MySQL中地理位置数据扩展geometry的使用心得
查看>>
Mysql中存储引擎简介、修改、查询、选择
查看>>