CSS丨为什么要清除浮动以及清除浮动影响的几种方式

首先,任何元素浮动以后都会成为一个块级元素且脱离默认文档流(不完全脱离,会占据文本流位置,但不占据元素流位置),这就会造成一种现象,其父元素的“高度塌陷”,所以我们要清除浮动,那么清除浮动的方法有如下几种:
1、使用空标签来清除浮动,在所有浮动的标签后面添加一个空标签,定义 CSS 样式为 clear:both; 弊端就是增加了无意义的空标签。
2、给包含浮动元素的父级标签添加 CSS 属性 overflow:

#parent{
    overflow:auto;
    zoom:1; //兼容IE 6 浏览器
}

3、可以同时浮动其父级元素。
4、使用 after、before 伪类来清除浮动,给其父元素添加如下样式:

#parent:after,#parent:before{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility:hidden;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,845评论 1 92
  • 这篇文章极好,以至于让我受益良多,就一字没有改动的转发过来一丝冰凉老师的文章 需要注意的是,display:tab...
    新晋小牛牛阅读 1,075评论 0 2
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,902评论 0 6
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,256评论 0 1
  • L把手机屏幕点亮,又关闭。她乘坐的列车已经晚点了半个小时。还以为这样满车站的人的场景只会出现在黄金周,或者春运。可...
    18998d8b1ebb阅读 278评论 0 0