CSS之BFC的应用之一清除浮动

最新推荐文章于 2022-01-05 15:20:35 发布
最新推荐文章于 2022-01-05 15:20:35 发布
阅读量253 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coderMozart/article/details/82658654
版权

阅读前提: 对CSS的BFC有一定的了解

当元素设置了浮动后，会脱离正常的文档流，影响到父级元素以外的元素

 

     通过设置父级元素为overflow:auto，虽然创造了BFC但是不够明确而且会出现副作用，可以直接设置父级元素的display:flow-root,明确的说明创造了BFC

 

     举例1，详细的说明可以查看Codepen上的例子

   

 

参考链接

       1.CSS布局指南

       2.display: flow-root

coderMozart
关注
专栏目录
10分钟理解CSS BFC原理及其应用
09-27
BFC的应用场景广泛，比如清除浮动、解决外边距折叠问题、创建自适应两栏布局等。熟练掌握BFC原理能帮助开发者更好地控制页面元素的布局，提高页面设计的灵活性和可维护性。在实际开发中，合理利用BFC特性可以避免很...
CSS之浮动/BFC/清除浮动（十二）
全粘小谭的博客
10-06 357
该文先讲解了CSS布局的几种策略，以及正常布局流是什么，然后逐步讲解浮动的由来，本质，如何产生，以及特性，随后讲解BFC规范，如何创建BFC，BFC的作用，最后列出清除浮动的几种方法。
盒模型，BFC，清除浮动
yangpengze的博客
01-05 101
什么是个模型 在html中的每一个元素都可以看成盒模型 盒模型分为标准盒模型，js盒模型和怪异盒模型 标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右) 怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器） 标准盒模型和怪异盒模型之间的转换 box-sizing:content-box; 将采用标准模式的盒子模型标准 box-s
CSS中的BFC和清除浮动的方法
爱前端的程序媛的博客
01-31 285
BFC：Box Formatting Context（块级格式上下文）的缩写。通俗来讲，就是管理块级元素的。 一个块级元素开启BFC后，可以管理块内的所有元素的排版布局，但是不能管理自己本身 BFC的布局规则 a．内部的Box会在垂直方向，一个接一个的放置（块级元素独占一行） b．BFC的区域不会与float box重叠------两列布局：左边固定右边自适应（可以开启BFC） c...
BFC与清除浮动
yc123h的博客
05-07 2102
欢迎访文我的博客YangChen’s Blog快投简历了，到时候肯定避免不了要笔试或者面试一些前端题目，所以呢有空把一些基础知识总结下这次说到的是BFC和清除浮动BFC首先说一下什么是BFC,引用下别人的概念 BFC（Block Formatting Context）直译为“块级格式化范围”。它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒
css如何清除浮动常用的方法有哪些
09-25
创建一个新的块级格式化上下文（BFC）也是一种清除浮动的有效方法。这可以通过设置`display: inline-block;` 或 `display: flex;` 来实现，但这里我们主要讨论使用`display: table;` 和 `display: flow-root;` 的...
浅谈CSS中的clear清除浮动
09-24
在CSS中清除浮动是前端开发工作中的一项基本技能。浮动可以使得元素脱离正常的文档流，从而实现文本环绕等布局效果，但浮动的元素也可能导致父元素高度塌陷，影响布局的稳定性。本文将详细介绍清除浮动的概念、方法...
CSS清除浮动原理(涉及BFC)和方法
jlin991的博客
03-03 3084
为什么要清除浮动？？首先理解浮动框：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。 浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列， 文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。 顾名思义，就是漂浮于普通流之上，像浮云
BFC及清除浮动详解
GuoZebin的博客
09-24 1560
一. BFC BFC 即 Block Formatting Contexts (块级格式化上下文)，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。就像js的函数作用域一样，BFC是页面上的作用域。 1...
山东交通学院在江西2020-2024各专业最低录取分数及位次表.pdf
10-02
那些年，与你同分同位次的同学都去了哪里？全国各大学在江西2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
西京学院在江西2020-2024各专业最低录取分数及位次表.pdf
10-02
那些年，与你同分同位次的同学都去了哪里？全国各大学在江西2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
山西师范大学在江西2020-2024各专业最低录取分数及位次表.pdf
最新发布
10-02
那些年，与你同分同位次的同学都去了哪里？全国各大学在江西2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
沈阳工业大学在江西2020-2024各专业最低录取分数及位次表.pdf
10-02
那些年，与你同分同位次的同学都去了哪里？全国各大学在江西2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
基于Arduino平台的自动寻找物品设计源码
10-02
该项目是一款基于Arduino平台的自动寻找物品设计源码，包含302个文件，包括148个头文件、136个C语言源文件、3个Markdown文件、3个JSON文件、3个包含文件、2个C语言扩展文件、2个压缩文件、2个汇编文件、1个Git忽略文件、1个Arduino源代码文件。该系统旨在实现物品的自动定位和寻找。
桂林学院在江西2020-2024各专业最低录取分数及位次表.pdf
10-02
那些年，与你同分同位次的同学都去了哪里？全国各大学在江西2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
西安航空学院在江西2020-2024各专业最低录取分数及位次表.pdf
10-02
那些年，与你同分同位次的同学都去了哪里？全国各大学在江西2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
基于Java的order-food-server点菜小程序后端设计源码
10-02
该点菜小程序后端源码采用Java语言开发，包含96个文件，其中Java源文件75个，XML配置文件12个，YAML文件4个，Git忽略文件1个，属性文件1个，Maven构建文件1个，SQL脚本1个。系统专注于实现高效便捷的点餐服务。
CSS清除浮动：8种方法全解析
"CSS清除浮动大全，包括8种方法，适用于不同浏览器，如ie, chrome, firefox, opera。这些方法旨在解决因元素浮动导致的布局问题，确保元素和其父级容器正确显示。" 在Web前端开发中，CSS浮动是一个重要的布局技术，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值