关于初识float的一点小感悟

                    float的个人感悟

在网页图片或者文字排版时,常常因为html本身自上向下的排序满足不了我们对美观的需求,及清晰明朗的界面的舒适。为此我们可以引入float。在解决我们对排版的需求同时,它也带来了一定的弊端
这里写图片描述
浮动的原理并不是说他直接变换了位置,而是浮动对象的类似拔高了,给人一种视觉上的错误,同时也因此而导致后面元素的被遮盖。
所以也导致使用浮动后致使网页内容混乱。为解决这个问题,常用的方式就是补齐拔高后导致的高度欠缺——缺啥补啥。
上图的代码如下:
这里写图片描述
图一
这里写图片描述
图二

图一为内容代码,图二为css样式

两图中的 /浮动去除/则是常见的几种消除浮动导致的网页结构混乱。
如图一中,是直接新建一个 div 但清除了浮动,只留下了div的高,补齐了之前浮动带来的高度差,是结构完整。
图二中一处则是在浮动所要处理部分全部处理后在其下进行一个块区域的补充并且显示为空并消除浮动,留下一个高,同样补齐了之前浮动带来的高度差。
图二中二处则是直接根据缺失的高度,给了个具体的高,一般不推荐。

哪一样的适用,还是要根据所处情况。

浮动是一个网页设计必不可少的一环,经常的接触想来一定对它的理解会更加深刻,努力加油。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值