当前位置 : 首页> Web培训 > 【CSS教程】清除浮动方法的css技巧

【CSS教程】清除浮动方法的css技巧

时间:2016-09-01 15:09:22   已访问:130次
热门专业

新手在学习css时候总是不知道该怎么用float,今天IT培训网总结的这份css教程,解开大家的困扰。

一旦当前浮动元素的父级div不设置固定的高度height时,浮动的元素无法将父级div的内容撑开。导致整个页面的布局都乱了。究其原因竟是因为没有“清除浮动”。因为之前在实际项目开发中就遇到过这个问题,给自己造成了不少的困扰。现在想把自己用到的清除浮动的方法跟大家分享下。

一、添加额外标签

在浮动元素末尾添加一个空的标签例如,其他标签br等亦可。

【CSS教程】清除浮动方法的css技巧_www.itpxw.cn

二、父元素设置 overflow:hidden/overflow:auto,具体示例代码如下:

【CSS教程】清除浮动方法的css技巧_www.itpxw.cn

三、父元素设置display:table

四、使用:before,:after 伪元素(个人比较推荐)

该方法通过在浮动元素的父级元素上添加一个具有清除浮动功能的类来实现清除浮动效果:

【CSS教程】清除浮动方法的css技巧_www.itpxw.cn

对于文字语言的把握可能不大好,表达的意思大家懂就好,更多的css教程内容可以在IT培训网css教程栏目学习更多。


推荐内容