BFC宽度自适应布局

冷不防 2022-06-11 05:55 310阅读 0赞

BFC：块级格式化上下文，它指的是一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

# **BFC的生成** #

（1）float的值不为none；

（2）overflowd的值不为visible；

（3）display的值为inline-block, table-cell, table-caption；

（4）position的值为absolute或fixed；

# **BFC的约束规则** #

（1）生成的BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。

（2）生成BFC元素的子元素中，每一个子元素的外边距和包含块的左边界相接处，（对于从右到左的格式化，右外边距和右边距相接触），除非这个子元素也创建了一个新的BFC（比如它自身也是一个浮动元素）。

**有朋友对它做了分解，我们直接拿来：**

（1）内部的BOX会在垂直方向上一个接一个的放置；

（2）垂直方向上的距离有margin决定。（完整的说法是：属于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关）

（3）每个元素的左外边距与包含块的左边距相接触（从左到右），即使浮动元素也是如此。（这说明BFCD子元素不会超出它的包含块，而position为absolute的元素可以超出它 包含块边界）；

（4）BFC的区域不会与float的元素区域重叠；

（5）计算BFC的高度时，浮动子元素也参与计算；

（6）BFC就是页面上的一个隔离的容器，容器里面的子元素不会影响到外面的元素，反之亦然

**BFC两栏自适应布局**

html代码：

<div class="left"></div> <div class="right"></div>

css代码

.left{ width:200px; height:200px; background:red; float:left; } .right{ height:200px; background:green; overflow:hidden; }

运行以上代码，伸缩页面宽度，可以发现的确是自适应

或者：

.right{ height:200px; background:green; display:table-cell; width:9000px;//宽度大于显示屏 }

# **BFC三栏布局** #

<div class="left"></div> <div class="right"></div> <div class="middle"></div>

css代码如下：

.left{ width:200px; height:200px; float:left; background:red; } .right{ width:200px; height:200px; float:right; background:green; } .middle{ display:table-cell; width:9000px; *display:inline-block; *width:auto; height:200px; background:pink; }

在这里\*表示兼容IE6和IE7

发表评论取消回复

表情：

评论列表（有 0 条评论，310人围观）

还没有评论，来说两句吧...

相关阅读

相关两列布局——左侧宽度固定，右侧宽度自适应的实现方法

左侧宽度固定，右侧宽度自适应的实现方法方法一：左浮动+margin-left 让两个元素在同一行显示首先想到的就是浮动，首先可以让左侧元素浮动,使其脱离文档流...

今天药忘吃喽~/ 2024年04月19日 13:30/ 0 赞/ 73 阅读

相关自适应布局

常见自适应布局有两种：左侧固定右侧自适应、左右两侧固定中间自适应左侧固定，右侧自适应 1、子元素 float:left // html部分 <div c

梦里梦外;/ 2023年08月17日 17:39/ 0 赞/ 136 阅读

相关 android 图片宽度自适应屏幕,Android ImageView 高度固定，宽度自适应

为避免歧义，我们首先来明确下文章标题的具体含义。对于一个 ImageView，所谓“高度固定，宽度自适应”在这里是指这个 ImageView 的高度取我们预设好的一个固定值，待

柔光的暖阳◎/ 2022年10月16日 00:43/ 0 赞/ 505 阅读

相关移动端布局实现搜索框宽度自适应

描述例如移动端京东页面 ([https://m.jd.com/][https_m.jd.com]) 的搜索框布局, 两侧的内容是固定不变的, 当浏览器宽度变化时, 只有

柔光的暖阳◎/ 2022年08月30日 15:59/ 0 赞/ 213 阅读

相关 CSS布局奇淫技巧之-宽度自适应

css这个东西，说难不难，说容易也不容易。我觉得最重要的还是经验的积累，正所谓的不积硅步，无以至千里。这一系列文章讲述几种css特殊布局的实现，也当作为自己做个备忘吧。首先

淡淡的烟草味﹌/ 2022年07月24日 10:10/ 0 赞/ 243 阅读

相关 BFC宽度自适应布局

BFC：块级格式化上下文，它指的是一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

冷不防/ 2022年06月11日 05:55/ 0 赞/ 311 阅读

相关使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，一类

淩亂°似流年/ 2022年06月07日 14:10/ 0 赞/ 320 阅读

相关 div自适应宽度

.item\_sel\{ min-width: 141px; width: auto; \_width:141px; white

小灰灰/ 2022年05月16日 05:37/ 0 赞/ 384 阅读

相关 div宽度自适应

自适应宽度的层不要指定宽度和float属性自适应宽度的层物理的位置放在最下面自适应的div中不能出现“width=100%”，否则在ie6中会出现错位现象

r囧r小猫/ 2022年05月15日 14:47/ 0 赞/ 327 阅读

相关详解左右宽度固定中间自适应html布局解决方案

a.使用浮动布局 html结构如下 <div class="box"> <div class="left">left</div>

青旅半醒/ 2021年11月01日 19:52/ 0 赞/ 336 阅读