浅谈BFC

一、CSS定位机制

  • 普通流

    除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
    块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
    行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

  • 浮动(float)

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
    由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

  • 绝对定位(position absolut)

    设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

二、BFC

BFC定义:

    BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流。具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。

BFC布局规则:

内部的Box会在垂直方向,一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时,浮动元素也参与计算

元素触发BFC:

  • body 根元素
  • 浮动元素:float 除 none 以外的值
  • 绝对定位元素:position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

三、BFC的应用

  1. 避免BFC导致块级元素margin重叠
<style>
        div{
            overflow: hidden;
        }
        p{
            width: 100px;
            height: 100px;
            margin: 100px;
            background: skyblue;
        }
style>
<body>
    <div><p>p>div>
    <div><p>p>div>
body>
如果不给div元素设置overflow:hidden的话,将会导致两个同处于一个BFC容器下,然后会使他们的外边距重叠

2. BFC实现栏自适应布局

<style>
    body{
        width:100%;
    }
    .div1{
        float: left;
        width: 100px;
        height: 100px;
        background-color: #87CEEB;
    }
    .div2{
        width: 80%;
        height: 100px;
        background-color: #2c3e50;
        overflow: hidden;
    }
style>
<body>
    <div class="div1">div>
    <div class="div2">div>
body>

这个实现了左侧固定宽度右侧自适应布局。
3. 清楚内部浮动

<style>
    .div1{
        border: 1rem solid #87ceed;
        overflow: hidden;
    }
    .div2{
        width: 100px;
        height: 100px;
        background-color: #2c3e50;
        float: left;
    }
style>
<body>
    <div class="div1">
        <div class="div2">div>
    div>
body>

这个解决了因为浮动元素导致父级div塌陷问题。

四、引申

清楚浮动的几种方式:

  1. 父级div定义height

    原理:直接给父级div定义高度就解决了因为浮动元素导致的父级div高度无法自动获取高度的问题
    优点:代码量少,简单书写
    缺点:固定了父级div 的高度

  2. 结尾处加空div设置style为clear:both

    原理:利用css中的clear:both来清除浮动,让父级div能自动获取高度
    优点:简单,而且没有固定父级div的高度
    缺点:设定过多的空div,使代码结构过于混乱

  3. 父级div定义 伪类:after 和 zoom

    原理:和2类似,可解决低版本IE的浮动问题
    优点:大多浏览器都支持
    缺点:代码多,原理难以理解

  4. 父级div定义 overflow:hidden

    原理:浏览器会自动浮动检查高度
    优点:简单,大多浏览器都支持
    缺点:超出部分会被隐藏

  5. 父级div定义 overflow:auto

    原理:和4相同
    优点:简单,大多浏览器都支持
    缺点:超出部分会增加滚动条

6.父级div 也一起浮动

原理:所有代码一起浮动,就变成了一个整体
优点:无
缺点:产生新的浮动问题

你可能感兴趣的:(CSS)