• 技术文章 >web前端 >css教程

    css如何使用伪元素清除浮动

    VV2020-03-25 10:48:29转载1020

    什么是BFC?

    块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。

    我们先了解一个名词:BFC(block formatting context),中文为“块级格式化上下文”。

    先记住一个原则:

    如果一个元素具有BFC,那么内部元素再怎么翻江倒海,翻云覆雨,都不会影响外面的元素。所以,BFC元素是不可能发生margin重叠的,因为margin重叠会影响外面的元素的;BFC元素也可以用来清除浮动带来的影响,因为如果不清除,子元素浮动则会造成父元素高度塌陷,必然会影响后面元素的布局和定位,这显然有违BFC元素的子元素不会影响外部元素的设定。

    (推荐教程:CSS教程

    以下情况会触发BFC:

    •<html>根元素
    •float的值不为none
    •overflow的值为auto,scroll,hidden
    •display的值为table-cell,table-caption和inline--block中的任何一个
    •position的值不为relative和static 即 position: absolute/fixed

    显然我们在设置overflow值为hidden时使container元素具有BFC,那么子元素child浮动便不会带来父元素的高度坍塌影响。

    利用伪类元素清除浮动:

    .clearFix::after,.clearFix::before {
           display: block;
          content: '';
          clear: both;
          visibility: hidden;
          height: 0;
    }
    .clearFix { zoom: 1;}

    相关视频教程推荐:css视频教程

    以上就是css如何使用伪元素清除浮动的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:脚本之家,如有侵犯,请联系admin@php.cn删除
    专题推荐:css 伪元素
    上一篇:css实现等高布局有哪些方式 下一篇:css中内容过长怎么解决
    大前端线上培训班

    相关文章推荐

    • css中position属性有哪些用法• css如何修改默认滚动条样式• css中zoom属性有什么作用• css如何实现开关效果

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网