其他分享
首页 > 其他分享> > HTML关于高度坍塌和BFC以及高度坍塌的最佳方案

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不能单独使用,尾元素是行内元素,行内元素不独占一行,即使清除了浮动影响也不能撑起高度。所以需要将其转化成一个块元素,这样才能撑起高度坍塌 (图片未截取全,不要误会)

 

 


          

标签:BFC,浮动,坍塌,元素,高度,开启
来源: https://www.cnblogs.com/strongbother/p/14655822.html