zoukankan      html  css  js  c++  java
  • BFC布局规则

    1. BFC (Block formatting contexts) 就是块级格式上下文,是页面盒模型(块盒和行盒)布局中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响。创建 BFC 的方式有:

    • html 根元素
    • float 浮动,即float 除 none 以外的值
    • 绝对定位,position (absolute、fixed)
    • overflow 不为 visiable,即为(hidden、auto、scroll)
    • display 为表格布局或者弹性布局,如display 为 inline-block、table-cells、flex

    2. BFC 主要的作用是:

    • 清除浮动,比如一个div中包括一个float元素,要把它包含进来,就需要对这个div设置如overflow: hidden的就变成一个BFC。
    • 防止同一 BFC 容器中的相邻元素间的外边距重叠问题,下面的两个div元素的上下间隔最后为100px,so, 如果想要避免外边距的重叠,可以将其放在不同的 BFC 容器中。这里可以对每一个div设置overflow:hidden,然后里面的内容放到一个div或p中。
      <head>
      div{
          width: 100px;
          height: 100px;
          background: lightblue;
          margin: 100px;
      }
      </head>
      <body>
          <div></div>
          <div></div>
      </body>
    • 实现左图右文之类的效果,两列布局模式。
      <img src='image.png'>
      <p>我是超长的文字<p>
      img {
          float:left
      }
      p {
          overflow:hidden
      }
    • 解决浮动元素造成的父元素高度塌陷问题:
      <div class='parent'>
          <div class='float'>浮动元素</div>
      </div>
      .parent {
          overflow:hidden;
      }
      .float {
          float:left;
      }
  • 相关阅读:
    version negotiation failed (we support version 0x01, peer supports version 0x04
    Ryu-SDN-IP
    ryu No module named
    ryu ImportError: No module named ryu.cmd.manager
    Cannot find required service quagga in /etc/init.d/
    sdx-ryu(一)
    Oracle Day01 数据库基础
    HTML+CSS Day11产品网站
    HTML+CSS Day10实例
    HTML+CSS D09 定位
  • 原文地址:https://www.cnblogs.com/roy1/p/13735490.html
Copyright © 2011-2022 走看看