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

          这几天都没有写博客,自己的懒惰又要跑出来了,发觉不能再这样下去了,不然就什么都不想干了,然后将之前已经写得差不多的博客重新检视了一遍。这篇博客已经写得挺久的了,但是一直没有发布,现在补充了一些,也让自己回顾了一下BFC布局。

         BFC的全称是block formatting context(块级格式上下文), 它是指一个独立的块级渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,并且与区域外部无关。那么怎样才能触发BFC呢?

         一。根元素

         二。float的值为left或right

         三。overflow的值为hidden

         四。display的值为inline-block,table-cell,table-capation,flex

         五。position的值为absolute或fixed

      为什么我们会使用BFC布局呢?我们都知道BFC是指独立的块级渲染区域,既然是独立的,说明内部与外部互不干扰,这就避免了相邻块级元素的margin覆盖,当然还有一个长处是可以包含浮动元素。

       我想做前端开发的都对IE恨之入骨,可惜IE是永远存在的痛。IE的haslayout与BFC具有很多相似之处,一个元素有没有布局就是通过haslayout告诉浏览器,如果有布局,haslayout的值就是true,反之就是false。那么如何触发layout呢?

         一。display:inline-block

         二。float:left / right

         三。position:absolute / fixed

         四。zoom:1

         五。overflow:hidden

          考虑到浏览器的兼容性和对元素的影响,建议使用zoom:1来触发layout 

  • 相关阅读:
    Elasticsearch 索引文档如何使用自动生成 Id?
    Spring Boot 缓存 知识点
    table的各种用法
    Spring Boot 整合 Elasticsearch
    Spring Boot 集成 Kafka
    Spring Boot 2实现分布式锁——这才是实现分布式锁的正确姿势!
    Spring Cloud 与 Spring Boot 版本兼容关系
    Spring Boot 之:Spring Boot Admin
    JVM 性能调优工具
    Spring Boot 之:Actuator 监控
  • 原文地址:https://www.cnblogs.com/yezi-dream/p/5825841.html
Copyright © 2011-2022 走看看