HTML关于高度坍塌和BFC以及高度坍塌的最佳方案
作者:互联网
小萌新刚刚入坑博客园,笔记可能并不是很完美,如有不足之处,还望各位指出,小弟必定铭记
下面是因为浮动而造成的高度坍塌
1.高度坍塌
高度坍塌的问题:
在浮动布局中,父元素的高度默认是被子元素撑开的,
当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离
将会无法撑起父元素的高度,导致父元素的高度丢失
父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱
所以高度坍塌是浮动布局中比较常见的一个问题,这个问题我们必须要进行处理! 2.BFC(Block Formatting Context) 块级格式化环境 -BFC是一个CSS中的一个隐含的属性,可以为一个元素开启BFC 开启BFC该元素会变成一个独立的布局区域 -元素开启BFC的元素后的特点: 1.开启BFC后的元素不会被浮动元素所覆盖 2.开启BFC后的元素子元素和父元素外边距不会重叠 3.开启BFC后的元素可以包含浮动的元素 - 可以通过一些特殊方式来开启元素的BFC: 1.设置元素的浮动(不推荐)(副作用比较大) 2.将元素设置为行内块元素(不推荐)(副作用比较大) 3.将元素的overflow设置为一个非visible的值(副作用最小) -常用的方式为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素 -下面相对应的方法 1. /* float:left;*/ 2./*display:inline-block; */ 3.overflow: hidden; 但这些或多或少有些不足,BFC也只是让其副作用比较小,并不能完美的解决高度坍塌 3.高度坍塌的最佳方案 使用after伪类解决高度坍塌
.box1::after{ content: ''; display: block; clear:both; } 用过元素的最后添加元素来撑起高度,用clear清除浮动影响,但clear不能单独使用,尾元素是行内元素,行内元素不独占一行,即使清除了浮动影响也不能撑起高度。所以需要将其转化成一个块元素,这样才能撑起高度坍塌 (图片未截取全,不要误会)
所以高度坍塌是浮动布局中比较常见的一个问题,这个问题我们必须要进行处理! 2.BFC(Block Formatting Context) 块级格式化环境 -BFC是一个CSS中的一个隐含的属性,可以为一个元素开启BFC 开启BFC该元素会变成一个独立的布局区域 -元素开启BFC的元素后的特点: 1.开启BFC后的元素不会被浮动元素所覆盖 2.开启BFC后的元素子元素和父元素外边距不会重叠 3.开启BFC后的元素可以包含浮动的元素 - 可以通过一些特殊方式来开启元素的BFC: 1.设置元素的浮动(不推荐)(副作用比较大) 2.将元素设置为行内块元素(不推荐)(副作用比较大) 3.将元素的overflow设置为一个非visible的值(副作用最小) -常用的方式为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素 -下面相对应的方法 1. /* float:left;*/ 2./*display:inline-block; */ 3.overflow: hidden; 但这些或多或少有些不足,BFC也只是让其副作用比较小,并不能完美的解决高度坍塌 3.高度坍塌的最佳方案 使用after伪类解决高度坍塌
.box1::after{ content: ''; display: block; clear:both; } 用过元素的最后添加元素来撑起高度,用clear清除浮动影响,但clear不能单独使用,尾元素是行内元素,行内元素不独占一行,即使清除了浮动影响也不能撑起高度。所以需要将其转化成一个块元素,这样才能撑起高度坍塌 (图片未截取全,不要误会)
标签:BFC,浮动,坍塌,元素,高度,开启 来源: https://www.cnblogs.com/strongbother/p/14655822.html