重庆最大的网站制作公司,是计算机网页制作工具,wordpress游戏资讯,企业的做网站1、开启了BFC能解决什么问题#xff1f;
给父元素开启BFC#xff0c;其子元素不会再产生 margin 塌陷问题。自己不会被其他浮动元素所覆盖。就算其子元素浮动#xff0c;元素自身高度也不会塌陷。
2、如何开启#xff1f;
根元素浮动元素绝对定位、固定定位的元素行内块…1、开启了BFC能解决什么问题
给父元素开启BFC其子元素不会再产生 margin 塌陷问题。自己不会被其他浮动元素所覆盖。就算其子元素浮动元素自身高度也不会塌陷。
2、如何开启
根元素浮动元素绝对定位、固定定位的元素行内块元素表格单元格: table、 thead、 tbody、 tfoot 、 th 、td、tr、caption。overflow 的值不为 visible 的块元素伸缩项目多列容器column-span 为 all 的元素 (即使该元素没有包裹在多列容器中)display 的值设置为 flow-root
例
1. 根元素html
2. 浮动元素 元素的 float 不是 none
3. 绝对定位元素 position 为 absolute 或 fixed
4. 内联块 display: inline-block
5. 表格单元格 display: table; , display: table-cell; , display: table-caption;
6. 具有overflow 且值不是 visible 的块元素.
7. 伸缩项目把父容器变成伸缩容器如 display:flex;
8. column-span: all; column-span 属性指定某个元素应该跨越多少列。 例如 3列 column-span: 3; |三 三 三|
display: flow-root;
总结
以上9种方式多多少少都有副作用而display: flow-root;的副作用最低就是部分浏览器不支持。
BFC就是这样一个东东不好下定义但是可以举例说明。
喝水不忘挖井人感谢尚硅谷教育的免费课程
