圣杯 双飞翼布局 多栏自适应布局BFC

元素的BFC特性与自适应布局

1. BFC元素简介与基本表现
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。

什么时候会触发BFC呢?常见的如下:

    • float的值不为none
    • overflow的值为auto,scrollhidden
    • display的值为table-celltable-captioninline-block中的任何一个。
    • position的值不为relativestatic


    • 2. BFC自适应布局模块间的间距。
    • 我们可以使用浮动元素的margin-right或者padding-right轻松实现间距效果。间距是20像素
    •           3. 与纯流体特性布局的优势
  •                         BFC自适应布局优势我总结了下面2点:
      1. 自适应内容由于封闭,更健壮,容错性强。比方说,内部clear:both不会与兄弟float产生矛盾。而纯流体布局,clear:both会让后面内容无法和float元素在一个水平上,产生布局问题。
      2. 自适应内容自动填满浮动以为区域,无需关心浮动元素宽度,可以整站大规模应用。而纯流体布局,需要大小不确定的margin/padding等值撑开合适间距,无法CSS组件化。
  • 4. BFC元素家族与自适应布局面面观
    理论上,任何BFC元素和浮动搞基的时候,都可以实现自动填充的自适应布局。

    但是,由于绝大多数的触发BFC的属性自身有一些古怪的特性,所以,实际操作的时候,能兼顾流体特性和BFC特性来实现无敌自适应布局的属性并不多。下面我们牵驴遛马一个一个瞅瞅(类似行为仅出1个代表示意,你懂的,如float:left/right):

    1. float:left 浮动元素本身BFC化,然而浮动元素有破坏性和包裹性,失去了元素本身的流体自适应性,因此,无法用来实现自动填满容器的自适应布局。不过,其因兼容性还算良好,与堆积木这种现实认知匹配,上手简单,因此在旧时代被大肆使用,也就是常说的“浮动布局”,也算阴差阳错开创了自己的一套布局。
    2. position:absolute 这个脱离文档流有些严重,过于清高,不跟普通小伙伴玩耍,我就不说什么了……
    3. overflow:hidden 这个超棒的哦!不像浮动和绝对定位,玩得有点过。也就是溢出剪裁什么的,本身还是个很普通的元素。因此,块状元素的流体特性保存相当完好,附上BFC的独立区域特性,可谓如虎添翼,宇宙无敌!哈无诶瓦(However), 就跟清除浮动:

      .clearfix { overflow: hidden; _zoom: 1; }

      一样。由于很多场景我们是不能overflow:hidden的,因此,无法作为一个通用CSS类整站大规模使用。因此,float+overflow的自适应布局,我们可以在局部(你确定不会有什么被剪裁的情况下)很happy地使用。

    4. display:inline-block CSS届最伟大的声明之一,但是,在这里,就有些捉襟见肘了。display:inline-block会让元素尺寸包裹收缩,完全就不是我们想要的block水平的流动特性。唉,只能是一声叹气一枪毙掉的命!然而,峰回路转,世事难料。大家应该知道,IE6/IE7浏览器下,block水平的元素设置display:inline-block元素还是block水平,也就是还是会自适应容器的可用宽度显示。于是,我们就阴差阳错得到一个比overflow:hidden更牛逼的声明,即BFC特性加身,又流体特性保留。

      .float-left {
          float: left;
      }
      .bfc-content {
          display: inline-block;
      }

      当然,*zoom: 1也是类似效果,不过只适用于低级的IE浏览器,如IE7~

    5. display:table-cell 让元素表现得像单元格一样,IE8+以上浏览器才支持。跟display:inline-block一样,会跟随内部元素的宽度显示,看样子也是不合适的命。但是,单元格有个非常神奇的特性,就是你宽度值设置地再大,大到西伯利亚,实际宽度也不会超过表格容器的宽度。


      因此,如果我们把display:table-cell这个BFC元素宽度设置很大,比方说3000像素。那其实就跟block水平元素自动适应容器空间效果一模一样了。除非你的容器宽度超过3000像素,实际上,一般web页面不会有3000像素宽的模块的。所以,要是你实在不放心,设个9999像素值好了!

      .float-left {
          float: left;
      }
      .bfc-content {
          display: table-cell; width: 9999px;
      }

      看上去,好像还不错。但是,还是有两点制约,一是IE8+以上浏览器兼容,有些苦逼的团队还要管IE6;二是应付连续英文字符换行有些吃力(可以嵌套table-layout:fixed解决)。但是,总体来看,适用的场景要比overflow:hidden广博很多。

    6. display:table-row 对width无感,无法自适应剩余容器空间。
    7. display:table-caption 一无是处……还有其他声明也都是一无是处,我就不全部展开了……

    总结:我们对BFC声明家族大致过了一遍,能担任自适应布局重任的也就是:

    1. overflow:auto/hidden IE7+
    2. display:inline-block IE6/IE7
    3. display:table-cell IE8+

    由于overflow有剪裁和出现滚动条等隐患,不适合作为整站通用类,于是,最后,类似清除浮动的通用类语句:

    .clearfix {
        *zoom: 1;
    }
    .clearfix:after {
        content: ‘‘; display: table; clear: both;
    }

    两栏或多栏自适应布局的通用类语句是(block水平标签,需配合浮动):

    .cell {
        display: table-cell; width: 9999px;
        *display: inline-block; *width: auto;
    }
    

    这就是zxx.lib.cssCSS样式库中.cell的由来!

    当然,由于和浮动元素合作,清除浮动还是要的,于是,就有了.fix + .l/.r + .cell的无敌组合,可以多栏,也可以无限嵌套。

    如果是局部,且确认安全;或有连续英文字符换行的隐患,你也可以使用.fix + .l/.r + .ovh的无敌组合,可以多栏,也可以无限嵌套。

  • 三种三栏网页宽度自适应布局方法

原文地址:https://www.cnblogs.com/xxh-2014/p/9031265.html

时间: 2024-10-10 02:53:51

圣杯 双飞翼布局 多栏自适应布局BFC的相关文章

【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4588 一.开篇之言 要说web上实现两栏自适应布局的方法,一双手都数不过来.不知大家有没有细想过,为什么这些方法可以实现自适应布局呢? 本文就将深入探讨下流体特性和BFC特性下的两栏自适应布局,还是

css 多栏自适应布局

在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师",我们应该需求一些优雅点的方法.先说说两栏布局,上例子: <div class='container' > <div class='div1' >1</div> <div class='div2' >2</div> </div> 如图,假如

多栏自适应布局

一.两栏自适应,左右栏高度均200px, 左栏宽度自适应,右栏宽度200px <!--html代码--> <div class="right"></div> <div class="left"></div> * { margin: 0; padding: 0; } /*方案一*/ .right { width: 200px; height: 200px; background-color: orange;

三栏自适应布局

常用的有三种方式: 1.绝对定位法(最易理解) 左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离.于是实现了三栏自适应布局. 1 <html> 2 3 <head> 4 5 <title>三栏自适应布局</title> 6 7 <style type="text/css"> 8 9 html,body{ 10 11 margin:0; 12 13 height:100%; 14 15 }

两栏三栏自适应布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html,body{width:100%;height:100%;overflow:hidden;} html{_height:auto;_padd

使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法 绝对定位法原

(转转转)使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于CSS3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法 绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin

css3中webkit-box的实现多栏自适应布局

我们经常会在手机端看到这种布局,要适应各种分辨率: 之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局.至少width要自己去算百分比.但是用flexible box 就可以实现真正意义上的流体布局.只要给出相应属性,浏览器会帮我们做额外的计算. 关于盒模型的几个属性: box-orient           子元素排列 vertical or horizontalbox-flex             兄弟元素之间比例

css布局: 两栏 自适应高度

只使用css实现 有两种方式, 一种是通过相对定位,再绝对定位获取父亲元素的高度, 一种是通过margin-bottom:-999em;padding-bottom: 999em; 父亲元素超出隐藏 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6