美文网首页
如何优雅的清除浮动?

如何优雅的清除浮动?

作者: 易路先登 | 来源:发表于2019-06-07 19:30 被阅读0次

有条件的话尽量使用弹性盒布局,就不会有烦人的浮动问题了。
当一个盒子的子元素浮动后,父元素的高度会塌陷。在css中给父元素添加伪元素即可清除,代码如下:

.clearfix::after,.clearfix::before{
  content:" ";
  display:table;
}
.clearfix::after{
  clear:both;
}

然后在父元素的类中引用clearfix类即可。
before微元素可防止元素顶部空白崩溃(即margin叠加或者叫顶部塌陷), display:table clear:both创建一个匿名的表格单元,会触发浏览器的BFC,即渲染独立,浮动元素的高度计算在父元素的总高度之内。
如此,清除浮动就完成了。

相关文章

  • 如何优雅的清除浮动?

    有条件的话尽量使用弹性盒布局,就不会有烦人的浮动问题了。当一个盒子的子元素浮动后,父元素的高度会塌陷。在css中给...

  • 如何优雅的清除浮动?

    有条件的话尽量使用弹性盒布局,就不会有烦人的浮动问题了。当一个盒子的子元素浮动后,父元素的高度会塌陷。在css中给...

  • css清除浮动

    前端开发中浮动处处可见,本文探讨浮动的成因以及如何更加有效的清除浮动。 1、浮动与清除浮动 2、清除浮动 基本cs...

  • 入门任务10

    1、浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 2、清除浮动指什么? 如何清除浮动...

  • css浮动及定位

    浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 清除浮动指什么? 如何清除浮动? 两种...

  • 任务10

    1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 2.清除浮动指什么? 如何清除浮动...

  • 11.22 前端学习

    清除浮动 clear:left清除左浮动clear:right清除右浮动clear:both清除对它影响最大的浮动...

  • 前端06

    清除浮动 clear:left清除左浮动clear:right清除右浮动clear:both清除对它影响最大的浮动...

  • 06 前端学习

    清除浮动 clear:left清除左浮动clear:right清除右浮动clear:both清除对它影响最大的浮动...

  • 清除浮动指什么? 如何清除浮动?

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或righ...

网友评论

      本文标题:如何优雅的清除浮动?

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