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

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

时间：2016-09-01 15:09:22  来源：CSS培训网  作者：IT培训网  已有：名学员访问该课程
标签(Tag):   css技巧(28)CSS教程(20)
因为之前在实际项目开发中就遇到过很多css方面的问题，给自己造成了不少的困扰。现在想把自己用到的清除浮动的方法跟大家分享下。

新手在学习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教程栏目学习更多。

顶一下
(0)
0%
踩一下
(0)
0%

IT培训0元试听 每期开班座位有限.0元试听抢座开始！ IT培训0元试听

  • 姓名 : *
  • 电话 : *
  • QQ : *
  • 留言 :
  • 验证码 : 看不清？点击更换请输入正确的验证码

在线咨询在线咨询

温馨提示 : 请保持手机畅通，咨询老师为您
提供专属一对一报名服务。

------分隔线----------------------------
分享到：QQ空间新浪微博腾讯微博人人网微信
------分隔线----------------------------

大话IT

推荐内容

图文推荐