关于初识float的一点小感悟
程序员文章站
2022-07-15 10:30:59
...
float的个人感悟
在网页图片或者文字排版时,常常因为html本身自上向下的排序满足不了我们对美观的需求,及清晰明朗的界面的舒适。为此我们可以引入float。在解决我们对排版的需求同时,它也带来了一定的弊端
浮动的原理并不是说他直接变换了位置,而是浮动对象的类似拔高了,给人一种视觉上的错误,同时也因此而导致后面元素的被遮盖。
所以也导致使用浮动后致使网页内容混乱。为解决这个问题,常用的方式就是补齐拔高后导致的高度欠缺——缺啥补啥。
上图的代码如下:
图一
图二
图一为内容代码,图二为css样式
两图中的 /浮动去除/则是常见的几种消除浮动导致的网页结构混乱。
如图一中,是直接新建一个 div 但清除了浮动,只留下了div的高,补齐了之前浮动带来的高度差,是结构完整。
图二中一处则是在浮动所要处理部分全部处理后在其下进行一个块区域的补充并且显示为空并消除浮动,留下一个高,同样补齐了之前浮动带来的高度差。
图二中二处则是直接根据缺失的高度,给了个具体的高,一般不推荐。
哪一样的适用,还是要根据所处情况。
浮动是一个网页设计必不可少的一环,经常的接触想来一定对它的理解会更加深刻,努力加油。