首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS闭合浮动

CSS闭合浮动

作者头像
星回
发布2018-08-02 15:25:27
7230
发布2018-08-02 15:25:27
举报
文章被收录于专栏:星回的实验室星回的实验室

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

一眼望上去,满屏的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清除浮动

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 添加标签
  • 2. 父元素处理
  • 3. 使用:after伪元素
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档