整理css之BFC原理

雪雁
• 阅读 1120

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

整理css之BFC原理

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

整理css之BFC原理

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

整理css之BFC原理

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

整理css之BFC原理

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

整理css之BFC原理

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

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

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

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

点赞
收藏
评论区
推荐文章
LinMeng LinMeng
4年前
小记面试题-2021
CSS类1.解释浮动及其工作原理浮动的元素可以向左或者向右移动,直到它的外边缘碰到包含元素(父元素)或另一个浮动元素的边框为止。要想使元素浮动,必须为元素设置一个宽度。虽然浮动的元素已不在文档流中,但是它浮动后所处的位置依然在浮动之前的水平方向上。因为浮动元素不在文档流中,所以文档流中的块元素表现的就像浮动元素不存在一样,下面的元素会填补原来的位置。有些
秃头王路飞 秃头王路飞
2年前
总结前端元素的各种高度(上)
HTMLElement.clientHeight只读属性Element.clientHeight对于没有定义CSS或者内联布局盒子的元素为0;否则,它是元素内部的高度(以像素为单位),包含内边距,但不包括边框、外边距和水平
小嫌 小嫌
3年前
css中块状元素和内联元素
CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。块状元素块状元素特点1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。常用的块状元素有:、
浩浩 浩浩
4年前
【Flutter实战】对齐与相对定位(Align)
4.6对齐与相对定位(Align)在上一节中我们讲过通过Stack和Positioned,我们可以指定一个或多个子元素相对于父元素各个边的精确偏移,并且可以重叠。但如果我们只想简单的调整一个子元素在父元素中的位置的话,使用Align组件会更简单一些。4.6.1AlignAlign组件可以调整子组件的位置,并且可以根据子
Wesley13 Wesley13
3年前
JS和CSS加载(渲染)机制不同
一、结论CSS可以在页面加载完成后随时渲染。举个例子:通过js给某个元素加一个id或者css,只要这个id或者css有对应的样式,此元素的样式就会自动生效。JS不可以在页面加载完成后生效。最明显的例子就是使用EasyUI的时候,iframe中哪些样式无效(EasyUi是依靠JS进行样式处理的,所以无法运行JS,那么样式也就无法设置。简单点说
Stella981 Stella981
3年前
Flutter之Padding
1、Padding介绍Padding用来为子元素添加填充,也就是指定子元素与容器边界的距离,作用基本上与Android中ViewGroup的padding属性差不多constPadding({Keykey,@requiredthis.padding,W
Wesley13 Wesley13
3年前
BFC清除浮动
BFC就是清除浮动用来处理文档脱离文档流的问题清除浮动的方法:a、父元素也添加一个浮动    产生弊端就是:margin不能使用b、给父元素添加一个:display:inlineblock     弊端同a一样:无法使用marginc、给父元素添加高     
Wesley13 Wesley13
3年前
CSS相对定位与绝对定位
CSS相对定位设置为相对定位的元素框会偏移某个距离。“相对于”元素仍然保持其未定位前的形状,它原本所占的空间仍保留!CSS相对定位实例(http://static.oschina.net/uploads/img/201312/01164555_uxZw.gif)注意:在使用相对定位时,无论是否进行移动,元素仍然占据原来
Stella981 Stella981
3年前
Seleinum_CSS定位方式
转载:https://www.cnblogs.com/longronglang/p/9144661.htmlCSS选择器:常见符号:表示id选择器.表示class选择器\表示子元素,层级一个空格也表示子元素,但是是所有的后代子元素,相当于xpath中的相对路径一、css:属性定
Stella981 Stella981
3年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
Wesley13 Wesley13
3年前
CSS清除浮动的4种方式
1、使用空标签清除浮动。我用了很久的一种方法,空标签可以是div标签,也可以是P标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代码:clear:both。此方法的弊端在于增加了无意义的结构元素。2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用
雪雁
雪雁
Lv1
爱情真的可以让人一下子快乐一下子伤心。
文章
1
粉丝
0
获赞
0
热门文章

暂无数据