html--css排版--float（浮动排版）：BFC块级格式上下文，触发方式(display:inline-block)（float:left；）（overflow:hidden；）2

最新推荐文章于 2022-10-11 15:16:40 发布
最新推荐文章于 2022-10-11 15:16:40 发布
阅读量215 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47295886/article/details/125753095
版权

BFC（Block formatting context）:块级格式上下文

        提供了独立的布局环境，这个环境的内容不会影响外部的布局，当然外部的也影响不到环境内部 相当于围墙的作用 

利用触发BFC可以解决浮动对布局的影响 

在浮动中：父元素塌陷的问题

父元素没有指定高度时候，实际的高度由子元素决定，由于子元素的浮动属性，脱离了文档流，使得父容器的高度塌陷-0，如果给父元素一个 BFC（围墙），围墙里面包含了浮动元素，是元素无法脱离父元素所在的容器，因此达到清除浮动的效果。

触发BFC：

inline-block:触发BFC

给父元素设置浮动:触发BFC

使用overflow属性:触发BFC

inline-block:触发BFC

 给父元素设置浮动:触发BFC

 

 使用overflow属性:触发BFC

 

 

¡Venceremo
关注
块级格式化上下文
你猜的博客
03-28 3608
初识块级格式化上下文(Block Formatting Contexts)前言html文档中元素的定位有3种方式(普通流、绝对定位、浮动)，除普通流以外，浮动与绝对定位都会导致元素脱离普通流，按照各自的方式进行定位。 带有BFC属性的容器属于普通流的一种。块级格式化上下文 (BFC)块格式化上下文是页面 CSS 视觉渲染的一部分。它是用于决定块盒子的布局及浮动相互影响范围的一个区域。BFC是元素在
前端面试题----HTML与CSS(随机排序)
m0_64337756的博客
04-27 425
1 Doctype 作用？ 严格模式与混杂模式如何区分？它们有何意义？ （1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 （2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 （3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 （4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。 2 五大浏览器以及内核？ Chrome 内核 Blink Safari 内核
清除浮动的方式与触发BFC的方式
lili100319的博客
09-28 186
清除浮动的方式与触发BFC的方式
怎样触发BFC清除浮动？
denghuanzhangsong的博客
03-13 378
直接上代码：<div class='content-box'> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div>如上所示，当.content-box的盒子不设置高度时，如果.item都是设置为display:float;则.content-box的高度将丢失掉，如
bfc有那些特性，如何触发？
luuu7的博客
05-02 4476
what：bfc格式化上下文，指一个独立的渲染区域。  bfc的特性：       内部的Box会在垂直方向上一个接一个的放置。       垂直方向上的距离由margin决定       bfc的区域不会与float的元素区域重叠。       计算bfc的高度时，浮动元素也参与计算       bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。 触发bfc的元素：
了解前端中的BFC(块级格式化上下文)
qq_51076105的博客
04-11 346
BFC(块级格式化上下文) 什么是BFC 指的是一个块级渲染作用域,该区域内拥有一套完整的规则来约束块级盒子的布局,且与区域外部无关. 为什么要使用BFC 当一个盒子不设置高度,当其中的子元素都浮动时,这个盒子便无法撑起自身. 这个问题可以使用BFC来解决,形成一个块级格式化上下文. 那么如何创建BFC float的值不为none position的值不为static或relative display的值为inline-block,flex,inline-flex 设置overflo
我在乐字节学习前端的第三天-学习笔记：H5+CSS3面试题总结
weixin_52392949的博客
11-16 936
H5+css3面试题总结 一、html5和html的区别： 1.html5新增了语义化标签：footer 、nav、section… 2.html5完全支持css3 3.支持本地离线存储 4.新增了canvas标签 5.新增视频和音频标签 HTML5离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 数据在浏览器关闭后自动删除。 如何区分 HTML 和 HTML5？ DOCTYPE声明 新增的结构元素 功能元素 123 二、对语义化标签的...
前端基础总结--CSS
chenyouleww的博客
07-08 581
前端 1.1前端方向 所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。 前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。 一般的我们说前端都是小前端，就是web端。 大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端 1.2前端的技术 前端能做什么？ 前端能做你上网
前端面试 - css+html常考知识点总结
Sabrina_cc的博客
04-20 1449
1. 实现三角形 2. 实现水平居中 3. 垂直居中 4. 水平垂直居中 5. CSS3新增 6. 盒子模型 7. 清除浮动 8. css选择器 9. 样式的优先级 10. CSS3新增伪类 11. 重绘和重排 1. 实现三角形 三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的...
HTML-CSS笔记
Dexter7的博客
08-06 547
HTML5-CSS3 HTML元素的lang属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> html元素是HTML...
CSS排版练习小作业，文字围绕图片显示，基本的float浮动定位
qq_45811913的博客
11-08 323
简单的css排版 基本的float浮动定位 文字围绕图片显示 css代码，float分成两块 <style type="text/css"> div.float1{float: left;;width: 570px;height:auto;} div.float2{float: right;;width: 600px;height:auto;} </style> body代码 选取豆瓣中diplo的新专辑的信息 ```html
bfc和float注意点
weixin_34096182的博客
04-25 412
2019独角兽企业重金招聘Python工程师标准>>> ...
html BFC的概念及作用
在下月亮有何贵干
03-01 1274
又到了巩固前端基础的时间，记录BFC概念、触发条件以及一些用BFC作为解决方案的常见案例。
CSS > 译文：理解CSS中的块级格式化上下文
weixin_33911824的博客
08-09 159
CSS > 译文：理解CSS中的块级格式化上下文 Original Author: Ritesh Kumar Original Article: http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/ Translator: HaoyCn D...
什么是块级格式化上下文？
07-07 3750
转文请标明 --- 出处：穆乙 http://www.cnblogs.com/pigtail/ 一、BFC是什么？ BFC（Block Formatting Context）直译为“块级格式化范围”。 是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Cont
浮动（会脱离文档流）、如何设置BFC环境的5种办法
最新发布
weixin_48796690的博客
10-11 303
浮动（会脱离文档流）、如何设置BFC环境的5种办法
CSS中的BFC详解：定义、触发方式及应用场景
小王的技术库
05-25 3640
1.什么是BFC? BFC就是一个css的一个布局概念，是一个独立的区域，是一个环境。 Block Formatting Context：块级格式化上下文。 W3C的官方解释： 它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。 BFC的目的：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。 2.如何触发BFC? float不为non
什么是BFC，如何触发BFC,BFC的作用
打工人
04-19 2998
BFC：块级格式化上下文 理解：BFC属于普通流，相当于一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素. BFC的布局规则 一、内部的Box会在垂直方向，一个接一个地放置。 二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置） 三、每个元素的margin box的左边， 与包含块border box的左边相接触 四、BFC的区域不会
深入理解前端面试关键：BFC块级格式化上下文
4. 显示模式为：inline-block、inline-table、table-caption、table-cell、flex、inline-flex、grid或inline-grid 5. 定位元素（position值为absolute或fixed） 三、BFC的应用场景 BFC 的特性在实际开发中有很多...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值