星空网 > 软件开发 > 网页设计

关于HTML中浮动与清除的思考

    布局时需要利用浮动(float)的属性,同时我们需要一个清除浮动(clear)与之配合才能达到预期的目标。

    w3s上关于float和clear的定义分别为:float:float 属性定义元素在哪个方向浮动。

                                                     clear:clear 属性设置一个元素的侧面是否允许其他的浮动元素。

    一个简单的例子(代码什么的我就不贴出来了:)):

    关于HTML中浮动与清除的思考 这是我们通过浮动然后清理浮动(clear:both)之后预期想要达到的效果。

    如果不清理浮动会是怎样?只清理右边呢?只清理左边呢?

    关于HTML中浮动与清除的思考<!--没有清理浮动的效果--!>

    关于HTML中浮动与清除的思考<!--clear:right 右侧不允许浮动--!>

    clear:left之后和我们预期的效果一样。为什么会产生这些不同的结果呢?又为什么文字在而颜色miss了呢?

    经过查资料以及问朋友之后得到了想要的答案:

    左边部分和右边部分浮动后就脱离了文档流,而尾部看到上面没人就自动跑到头部的下面去了(TAT),这就是我们没有清理浮动后看不到尾部黄色的原因。那又是为什么能看到尾部的字体呢?浮动只是类似于绝对定位而不完全相同于绝对定位会完全脱离文档流,会继续对文档流的内容产生影响,所以我们能看到文字描述。

    其实我们只需要用一个opacity属性就能完全明白了。

    没使用clear属性时在opacity:0.5的状态下如图:

    关于HTML中浮动与清除的思考

    (⊙o⊙)… 大概就是这样吧。

 

 

    这是我第一次写博客!这是我第一次写博客!这是我第一次写博客!重要的事说三遍。ahaaaaaaa,内容很简单纯新手向。刚毕业土木狗任性辞职了,然后准备接触前端,听说要想学习好前端需要多看博客多写博客,所以我来了。争取养成写博客的习惯。

    万一有人看到(会有人看到吗?)之后觉得需要吐槽的袭来吧,有错误的地方欢迎指正,欢迎老手指导,新人交流!

  




原标题:关于HTML中浮动与清除的思考

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

Red Points:https://www.ikjzd.com/w/2044
JollyPay:https://www.ikjzd.com/w/2045
波罗蜜:https://www.ikjzd.com/w/2046
百伦:https://www.ikjzd.com/w/2047
易麦宝功能,费用,使用介绍:https://www.ikjzd.com/w/2048
Social Blade,红人工具:https://www.ikjzd.com/w/2049
百崖大峡谷生态旅游景区(探秘中国西南自然风光):https://www.vstour.cn/a/363176.html
海陵岛马尾岛景点介绍 海陵马尾岛图片:https://www.vstour.cn/a/363177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流