zoukankan      html  css  js  c++  java
  • html/css中BFC的开启、关闭、作用

    什么是BFC

    BFC是什么并不重要。重要的是开启它干嘛?以及如何开启它

    根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context(块级 格式化 环境)简称BFC

    开启元素的BFC后,元素会有如下特性:

    1.父元素的垂直外边距不会和子元素重叠。

    2.开启BFC的元素不会被浮动的元素所覆盖。

    3.开启BFC的元素可以包含浮动的子元素。

    在以下情况下,会自动开启BFC:

    1.设置元素浮动(此方法,虽然可以撑开父元素,但是会导致父元素的宽度丢失,也会导致下边的元素上移)

    2.设置元素绝对定位

    3.设置元素display:inline-block;(此方法虽然也可以解决问题,但是转为行内块也会导致宽度丢失,因此也不推荐此方法)

    4.将元素的overflow设置为一个非visible的值(推荐方式:overflow:hidden;是副作用最小的开启BFC方式)

        注:ie6不支持BFC,如果要同时兼容ie6  可以加一个属性 zoom:1;即可(zoom表示放大,写几就是放大几倍,此属性仅支持IE,且IE8以下)

  • 相关阅读:
    冒泡排序
    跑马(行转列,列转行)
    选择排序
    day06-迭代器
    day05-装饰器作业
    day07-生成器
    day08-内置函数和匿名函数
    day09-正侧表达式
    144-SpringBoot的编码问题?
    143-SprinBoot如何使用Servlet?
  • 原文地址:https://www.cnblogs.com/qq9836/p/11615500.html
Copyright © 2011-2022 走看看