当前位置: 首页 > Web前端 > CSS

CSS和应用的BFC

时间:2023-03-30 16:41:32 CSS

什么是CSS的BFCBFC(BlockFormattingContext)块级格式化上下文首先,格式化上下文是由一组CSS规范定义的页面渲染区域,有自己的渲染规则(定位,子元素之间的关系),那么BFC是格式化上下文之一,具有BFC特性的元素可以看做是一个大容器,里面子元素的布局不会影响到外面的元素元素如何具有BFC特性当元素是根元素时HTML,它自动具有BFC特性当元素设置为绝对定位元素时(position:fixed,absolute)当元素设置为float:none元素以外的浮动元素时当元素设置了overflow属性时,并且value不可见,如何应用元素的BFC特性来解决上下边距重叠问题的原因:当我们定义两个块级元素时,上边距d它们之间的下边距将重叠。这是因为根元素有BFC特性,会重叠两个块级元素的上下边距:如果你想让它们之间的上下边距不重叠,就需要为它们具备BFC特性eg.

这样两个元素就会独立,上下边距不会重叠。清除浮动,解决浮动导致父元素高度塌陷的问题原因:由于父元素没有设置高度,子元素设置为浮动,会脱离正常的文档流,让父元素折叠的高度。解决方案:由于BFC容器可以包含浮动元素,所以可以触发父元素的BFC属性eg。
处理元素被浮动元素覆盖原因:设置为浮动元素及其siblingelementswillcovered解决方法:给兄弟元素添加BFC特性,可以和浮动元素隔离,不被它覆盖eg。内容