整理css之BFC原理

tomener 发布于2019-08-30 14:12 / 1766人阅读

摘要：通过格式化上下文后可以将脱离了普通流的元素隔离，使其不会与外界的元素相互隔离。第一次写，写得不好请大家多多指教哈哈哈哈

首先回顾下CSS常出现的几个样式问题
1当子元素添加上边距时，父元素也会向下移动

解决方法:
给子元素添加display:inline-block;
或者用父元素的padding-top代替给可以

2子元素浮动后，父级元素检测不到其高度
3当元素浮动后，兄弟元素的内容超过其高度后会侵占它的区域（其实问题原因与第二点类似）

解决方法:给超出高度的元素加上overflow:hidden;

4同级元素间的边距重叠时，如两个元素间有上下边距，只会有值大的边距生效。

解决方法:
给其中一个元素加上一层标签包裹，并给标签加上满足BFC的样式

问题出现原因:
1 元素之间的边距无法识别是因为它们的边距合并到了一起，浏览器只能识别较大的那个值
2 元素浮动后或绝对定位后，高度将无法识别，所以可能会影响父级元素

BFC级格式化上下文,大白话理解则是让它形成一个独立的容器，
与外面的元素不会相互影响，而使用BFC则可以解决上诉问题。
通过BFC 格式化上下文后可以将脱离了普通流的元素隔离，使其不会与外界的元素相互隔离。

第一次写，写得不好,请大家多多指教哈哈哈哈

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

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

【芝士整理】CSS基础图谱

摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动产生，元素周围的内容转换为围绕元素排列。选择器注意点属性选择器 [attr^=value] - 开头或全等 [attr$=value] - 结尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含选择器组 A > B - 直接子节点 A + B - 下一个兄弟节点 A...

iOS122 2019-08-30 15:54 评论0 收藏0
知识整理之CSS篇

摘要：如对知识点感兴趣，可移步至知识整理之篇就是针对不同的浏览器或不同版本浏览器写特定的样式达到让浏览器兼容的过程。对于伪元素的定义伪元素在中创建了一些抽象元素，这些对象不存在与常文档流中。隐藏元素的几种方法该属性隐藏元素，单元素在文档流中仍占据 CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至...

ermaoL 2019-08-30 15:55 评论0 收藏0
十分钟复习CSS盒模型与BFC

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

verano 2019-08-02 10:48 评论0 收藏0
十分钟复习CSS盒模型与BFC

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

suxier 2019-08-30 15:53 评论0 收藏0
CSS知识点及技巧整理

摘要：当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。详见浮动与清除浮动浮动相关知识属性的取值元素向左浮动。是相对长度单位，相对于当前对象内文本的字体尺寸。这些个知识点是我个人认为的，下面我们就来看看这些个知识点。 1.怎么让一个不定宽高的 DIV，垂直水平居中? 使用Flex 只需要在父盒子设置：display: flex; justify-content: cent...

masturbator 2019-08-30 14:02 评论0 收藏0