重新定义BFC

harryhappy 发布于2019-08-29 13:07 / 2967人阅读

摘要：大家花秒的时间组织组织语言，给下个定义，看看咱们的想法是不是一致的，哈哈。

先给BFC下个定义

CSS里的BFC可真的是一个老生长谈的问题，网上的资料很多，介绍的也很详细，但是看完之后，还是不知道BFC到底是个啥东西，似懂非懂，它到底是个标准呢，还是一套约定俗成的编码规范呢，A和B两个DIV，BFC化到底指的是A还是指的是B呢。大家花5秒的时间组织组织语言，给BFC下个定义，看看咱们的想法是不是一致的，哈哈。

我给BFC下的定义是：BFC就是把因为某些情况下（比如脱离文档流），block元素被破坏的特性，恢复回来

按照上面的定义，我举几个例子来说明一下

高度塌陷问题

现象比较简单，子元素float：left，父元素的高度就塌陷了。这就是因为子元素的float导致父元素block特性：高度变没了，按正常的block元素的特性，父元素的高度应该和子元素高度是一致的（这句说的不严谨，不过为了说明重点，这里不详细说明父元素的高度），现在很明显不是。

现在BFC上场了，为了把父元素的高度特性找回来，让他的高度和子元素相同，我们根据BFC的触发条件，给父元素增加overflow:hidden或display:inline-block，结果就是这样：

margin塌陷问题

margin塌陷我们也经常遇到，效果如下：

题外：这是w3c的规定：两个盒子垂直排列时，取较大的margin。这个不应该算是问题，但是和我们排版的习惯相背，所以我们还得解决。

现在BFC又要出场了，这次是为了解决两个div间隔相加的特性，这次我们把红背景的元素增加display:inline-block，效果如下：

左右自适应布局

我们先看一个常见的现象：

那现在问题来了，一个有独立人格的div，是不能容忍自己被其他div抢风头的，虽然那个小的脱离的文档流。现在又该轮到BFC出场了，我们把大的div设置overflow:hidden或display:inline-block，就会有下面的效果：

这里我们稍加改造，再次发挥BFC的能量。我们设置右侧DIV的样式：width：auto，效果就是这样：

此效果的代码：



    float：left
    我是自适应的


body {
    background-color:lightgray;
    padding:20px;
}
.inner {
    width:260px;
    height:50px;
    border-radius:5px;
    line-height:50px;
}
.left {
    width:100px;
    height:100px;
    background-color:rgba(0,255,0,0.5);
    float:left;
    
}
.right {
    width:auto;
    height:150px;
    background-color:rgba(255,0,0,0.5);
    overflow:hidden;
}

.wrap {
    border:1px solid black;
    padding:5px;
    border-radius:10px;
    overflow:hidden;
}

混合云服务器托管重新定义重新定义cdn webrtc重新定义通信 bfc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112380.html

【CSS基础】CSS常见概念

摘要：在中主要通过四个部分来描述，分别为。对于元素，负值会完全覆盖前一个元素，会影响后面元素一起移动对于元素，元素脱离了普通文档流，对其他元素没有影响对于元素，可以通过负值进行覆盖，最常见的应用是三列布局。浏览器渲染过程不同的浏览器渲染过程实际上并不相同，但是依旧存在相一致的部分，大致过程如下所示：showImg(https://segmentfault.com/img/bVHJfZ?w...

hsluoyz 2019-08-30 14:07 评论0 收藏0
深入清除浮动原理

摘要：如下图所示可以看到父元素的高度为为了解决这种状况就要清除浮动了。下面详细看一下这两大类清除浮动的方式及原理。所以，避免穿透啊，清除浮动什么的也好理解了。关于浮动设置为浮动的元素会脱离当前文档流，向左或向右移动直到边缘遇到另一个浮动元素或者到达边界。普通元素不会对齐造成影响。浮动是把双刃剑，在给我们的布局带来便利的同时有一些缺点需要我们去解决。例如最常见的父元素塌陷。如下图所示：...

freewolf 2019-08-29 15:25 评论0 收藏0
深入清除浮动原理

摘要：如下图所示可以看到父元素的高度为为了解决这种状况就要清除浮动了。下面详细看一下这两大类清除浮动的方式及原理。所以，避免穿透啊，清除浮动什么的也好理解了。关于浮动设置为浮动的元素会脱离当前文档流，向左或向右移动直到边缘遇到另一个浮动元素或者到达边界。普通元素不会对齐造成影响。浮动是把双刃剑，在给我们的布局带来便利的同时有一些缺点需要我们去解决。例如最常见的父元素塌陷。如下图所示：...

chnmagnus 2019-08-05 13:53 评论0 收藏0
深入理解BFC

摘要：最常见的有简称和简称。计算的高度时，浮动元素也参与计算。遇到这种情形，我们如何处理处理方法其实有很多，在元素中添加或者使其父元素形成一个也可以在元素中添加或是这些都可以有效解决父子元素重叠问题。解决这个问题，只需要把把父元素变成一个就行了。一、什么是BFC Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，...

legendmohe 2019-08-29 17:01 评论0 收藏0
深入理解BFC

摘要：最常见的有简称和简称。计算的高度时，浮动元素也参与计算。遇到这种情形，我们如何处理处理方法其实有很多，在元素中添加或者使其父元素形成一个也可以在元素中添加或是这些都可以有效解决父子元素重叠问题。解决这个问题，只需要把把父元素变成一个就行了。一、什么是BFC Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，...

testHs 2019-08-02 11:45 评论0 收藏0