CSS闭合浮动

前段时间做一个电商外包,分类货架、商品列表、设计师作品陈列……

一眼望上去,满屏的float,页面内容一多了那就是天塌地陷啊。于是按照多年以前实习学会的闭合浮动

<style>
    .clear {  clear: left|right|both|none; }
</style>

<!-- Float elements -->
<div class="clear"></div>

OK,解决了,页面列表瞬间丰满了起来……不过,浮动一多了代码里满是看上去毫无意义的<div>,影响代码可读性不说,这简直是要了处女座强迫症的老命啊!那么问题来了,闭合浮动哪家强?在一番搜索后,将常用方法整理如下:

1. 添加标签

利用HTML标签自身属性:

<!-- Float elements -->
<br clear="all"/>

才晓得还有这么个属性,涨姿势了,不过……虽然代码量少了点,这跟前述逼死强迫症的行为也并没有本质性的区别。

2. 父元素处理

俗话说得好,子不教,父之过,儿子不听话那就只好从老子身上下刀了。

<style>
    .list-float { overflow: hidden; }
</style>

<div class="list-float">
    <!-- Float elements -->
<div>

Perfect. 看上去如此美好,那么这就是终极解决之道了?等等……我给父元素设置了overflow: hidden,子元素要是溢出咋整?自动换行咋整?还是另谋高就吧。

3. 使用:after伪元素

伪元素能做许多神奇的事情,这次也不例外:

<style>
    .clear-ele:after { 
        content:"."; 
        display:block; 
        height:0; 
        visibility:hidden;
        clear:both;  
    }
</style>

<div class="clear-ele"><!-- Float element -->
<div>

最终只剩下一个类,并且可以直接绑定到浮动元素上,如果做好代码复用的话,就真正达到了结构与表现分离的漂亮代码。仔细看这里面的属性都是啥意思呢?

  • :after在该浮动元素后生成了一个元素,内容为.
  • display: block让该元素变为块级元素,拥有了撑开父元素的能力
  • height: 0visibility: hidden隐藏掉该元素,并让其不对父元素原有高度造成影响
  • clear: both清除浮动

最近的项目都用上了这种方法来清除浮动,代码也清爽了很多。也许还有更好更简洁的方法,待以后慢慢发掘。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林冠宏的技术文章

高阶自定义View --- 粒子变幻、隧道散列、组合文字

跟随早前开源的 XView (https://github.com/af913337456/XView) 项目,本次在原基础上添加了 粒子变幻 自定义View。...

17320
来自专栏自动化测试实战

flask第35篇——模板项目实战(一)

上面代码综合了之前学过的知识,包括:flask for 循环、set模板赋值其余都是前端的内容,这里不做过多的阐述。

13740
来自专栏练小习的专栏

带你轻松打开SVG动画的大门

初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

24160
来自专栏Thinks

带你轻松打开SVG动画的大门

初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

16720
来自专栏前端迷

双十一,教你给你女朋友不一样的表白(程序员版)

https://ru23.com/11?name=front,这样会自动把源码中you换成女朋友的名字

46940
来自专栏程序猿

【C】贪吃蛇小游戏代码

#include <stdio.h> #include <graphics.h> #include <stdlib.h> #include <dos.h> /*...

38880
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

18430
来自专栏自由而无用的灵魂的碎碎念

分享:CSS长度单位:px和pt的区别

先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;而pt就是point,是印刷行业常用单位,等于1/72英寸。

10620
来自专栏前端新视界

如何使用纯 CSS 制作四子连珠游戏

实验是学习新技巧、思考新想法、并突破自身极限的有趣的方式。“纯 CSS”演示很早就有了,但是随着浏览器和CSS的发展,新的挑战又出现了。CSS 和 HTML 预...

12920
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow

用过Arcgis Server for JavaScript API肯定知道InfoWIndow,你在用InfoWindow的时候会发现各种问题,例如不能完全显...

16820

扫码关注云+社区

领取腾讯云代金券