热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

给父级DIV清除浮动

最近学习了float这个属性,float可以让元素浮动起来,浮动起来的元素脱离原来的排列层面(未完全脱离文档流),处于上方。float的确让元素的布局变得简单,但是也同样给浮动起来的元素地父级

    最近学习了float这个属性,float可以让元素浮动起来,浮动起来的元素脱离原来的排列层面(未完全脱离文档流),处于上方。float的确让元素的布局变得简单,但是也同样给浮动起来的元素地父级带来一些问题。子级元素浮动起来后,不再默认继承父级的宽高,而父级也检测不到子级的内容。

 

    解决这个问题的方法就是给父级清除浮动。

  (1)给父级手动添加高度

  (2)给父级添加overflow:hidden

  (3)给浮动的元素添加一个同级的标签,在标签内写clear:both;

    (4)给父级添加一个after的伪类,在父级:after内写{

            content:".";
            visibility:hidden;
            display:block;
            clear:both;}

 


推荐阅读
author-avatar
隐之王语录
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有