美文网首页
清除浮动的方法

清除浮动的方法

作者: 数据研究bot | 来源:发表于2018-09-05 15:14 被阅读10次

清除浮动

清除浮动的作用

为了解决父级元素因为子级元素浮动导致高度为0的问题,将浮动的盒子圈在内部,让父盒子闭合出口和入口,防止子元素影响其他元素。(准确地说,并不是清除浮动,而是清除浮动后造成的影响)
在CSS中,clear属性用于清除浮动


清除浮动的方法

  • 额外标签法:在最后浮动的盒子后加div标签,如<div class="clear"></div>,并在css中赋予 .clear{clear:both}属性即可清除浮动。(清除浮动后,父盒子会自动检测子盒子的高度,比较简便但是结构性差)
  • overflow法:给父盒子增加overflow属性,如.father{overflow:hidden;}(代码简单,但是内容较多时,溢出的内容会被隐藏)
  • after伪元素法:给浮动元素的父盒子添加clearfix标签, .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
    .clearfix {*zoom: 1;} /* IE6、7 专有 */

总结

以上较为常用的方法为overflow法与after伪元素法。

  1. 当父元素文本内容较多时,不建议用overflow,容易将重要的信息隐藏掉,因此,此方法更适合应用在一些小模块的内容中。
  2. 在网页布局中,after伪元素的应用频率较高,不但操作简便,而且可以使文档结构更清晰,强烈推荐此方法。

相关文章

  • (17.03.27)清除浮动

    清除浮动的方法: clear:both/left/right;清除浮动;两边/左边/右边

  • 前端面试积累2-清除浮动

    1.清除浮动的方法 方法一:对父级设置适合的CSS高度(不推荐) 方法二:clear:both 清除浮动 (常用)...

  • 完美clearfix

    clearfix 清除浮动分为两种: 清除自身浮动 清除父级浮动 这里不讲空标签的方法,因为空标签还要额外添加新的...

  • web前端入门到实战:css基础-float浮动

    float实现文字环绕图片效果: 清除浮动的方法一: 在浮动元素后面使用一个空元素 清除浮动的方法二: 给容器添加...

  • web前端入门到实战:css基础-float浮动

    float实现文字环绕图片效果: 清除浮动的方法一: 在浮动元素后面使用一个空元素 清除浮动的方法二: 给容器添加...

  • css问题收集 2018-07-19

    一、 父元素高度无法撑开 原因:1.子元素浮动 解决:清除浮动 清除浮动方法: .clearfix:after{c...

  • 关于清除浮动的方法

    刚学习了浮动,这里整理一下清除浮动的方法。 一、伪元素 伪元素清除浮动是伪元素的用途之一,这是清除浮动的一个相对比...

  • css清除浮动的三种方法

    摘要:css清除浮动float的三种方法总结,为什么要清除浮动?浮动会有哪些影响? 一.先看现象(display:...

  • css3复习

    清除浮动: 方法:clear清除浮动(添加空div法)在浮动元素下方添加空div,并给该元素写css样式: ...

  • 前端必须知道的CSS原理

    清除浮动原理 一说到清除浮动,作为前端开发者都不陌生,使用最普遍的方法就是下面这段代码了 清除浮动的关键: cle...

网友评论

      本文标题:清除浮动的方法

      本文链接:https://www.haomeiwen.com/subject/yjvnwftx.html