BFC块级格式化上下文

pingink 发布于2019-04-23 13:29 / 2520人阅读

摘要：规则内部的会在垂直方向，一个接一个地放置。属于同一个的两个相邻的会发生重叠。的区域不会与重叠。

规则

内部的Box会在垂直方向，一个接一个地放置。
属于同一个BFC的两个相邻Box的margin会发生重叠。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
计算BFC的高度时，浮动元素也参与计算

BFC触发原理

1 根元素
2 float属性不为none,例如left、right
3 position为absolute或fixed
4 display为inline-block, table-cell, table-caption, flex, inline-flex
5 overflow不为visible，例如hidden、auto

作用

清除浮动,BFC里面的浮动元素高度也会参与计算

<div class="layout">
    <div>div>
     <div>div>
div>

如果里面的两个div为浮动，那么设置 .layout {overflow: hidden}

　　2. 防止margin重叠

总结：

BFC通俗地说：就是一个容器，里外不相互影响，记住：清除浮动的时候，如果使用 overflow： hidden，是存在缺点的，如果超过了范围，那么则被隐藏了
清除浮动正确的方式：

.clearfix:after{
    content: ",
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
    line-height:0;//行高为0
}

GPU云服务器云服务器电脑上下载的视频怎么转换格式 bfc bfc布局块级流

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

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

20170601-BFC(块级格式化上下文)

摘要：的全称是块级格式化上下文。浮动绝对定位的元素定位块容器属性为带有属性该属性值不为和的为的块级元素会在其内部建立新的块级格式化上下文。使用可以解决以下问题父子元素的上下合并问题文字围绕浮动元素的问题和子元素浮动导致父元素高度为的问题。 BFC BFC的全称是Block Format Content -- 块级格式化上下文。浮动、绝对定位的元素(absolute、fixed定位)、块容器(...

PAMPANG 2019-08-29 12:41 评论0 收藏0
20170601-BFC(块级格式化上下文)

摘要：的全称是块级格式化上下文。浮动绝对定位的元素定位块容器属性为带有属性该属性值不为和的为的块级元素会在其内部建立新的块级格式化上下文。使用可以解决以下问题父子元素的上下合并问题文字围绕浮动元素的问题和子元素浮动导致父元素高度为的问题。 BFC BFC的全称是Block Format Content -- 块级格式化上下文。浮动、绝对定位的元素(absolute、fixed定位)、块容器(...

weknow619 2019-08-01 16:56 评论0 收藏0
块级格式化上下文(BFC)

摘要：可以阻止元素被浮动元素覆盖浮动元素的块级兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素触发后可以阻止这种情况的发生。一、什么是BFC 具有BFC属性的元素也属于普通流定位方式，与普通容器没有什么区别，但是在功能上，具有BFC的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且具有普通容器没有的一些特性，比如包含浮动元素...

TerryCai 2019-08-29 15:22 评论0 收藏0
视觉格式化模型之BFC

摘要：详见权威指南块级元素即块级元素是源文档中被格式化为块的元素，或者属性为的元素。概念顾名思义块级格式化上下文。每个元素的的左边，与包含块的左边相接触对于从左往右的格式化，否则相反。情景：浮动的高度塌陷时，使用overflow：hidden可使父元素将浮动的子元素包含起来，解决问题。但背后的原理是什么？这就是今天要谈的BFC。在将BFC之前需要先了解几个概念：盒子模型（Box mo...

anyway 2019-08-30 13:18 评论0 收藏0
BFC原理详解

摘要：最常见的有简称和简称。可以把它理解成是一个独立的容器，并且这个容器的里的布局，与这个容器外的毫不相干。根据布局规则第二条垂直方向的距离由决定。参考前端精选文摘神奇背后的原理之详解深入理解流体特性和特性下多栏自适应布局布局一.BFC是什么在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 1.BOX：CSS布局的基本单位 Box是CSS布局的...

ziwenxie 2019-08-29 11:10 评论0 收藏0
十分钟复习CSS盒模型与BFC

摘要：盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高盒模型 css盒模型与BFC 本文为收集整理总结网上资源旨在系统复习css盒模型与bfc 节省复习时间阅读10分钟什么是盒模型每一个文档中，每...

verano 2019-08-02 10:48 评论0 收藏0