- 高度塌陷
当父元素没有设置高度时,父元素的高度是由子元素内容撑开。
当子元素设置浮动后,就会脱离文档流。父元素的高度就会为0,这就是造成高度塌陷。
下面的元素就会上移,这就会打乱页面的布局,为了防止这种情况我们需要对元素设置BFC - BFC (bloce format content)块级格式化内容
css隐藏的一个属性,开启BFC元素将变成一个独立的布局区域。- 开启BFC的特点:
- 父元素不会被子元素覆盖。边框不重叠
- 父元素与子元素的外边距不会重叠
- 父元素完全包含子元素的外边距、边框、内边距、内容区
如图
- 开启BFC的特点:
- 开启BFC常用的方式:
设置父元素overflow属性的值为hiddenoverflow:hidden;
- BFC其他实例
当第一个元素设为浮动,第二个元素不想被覆盖,除了也设置为浮动,也可以开启BFC。
当子元素设置外边距时,不想改变父元素的位置,我们也可以开启BFC
- clear
清除浮动元素对本元素及下方元素的影响
属性值:
left 清除左侧浮动元素的影响
right 清除左侧浮动元素的影响
both 清除两侧浮动元素最大影响的这边
原理:
当浏览器检测到上方为浮动元素后,会在本元素添加等高长度的上边距
- 伪元素防止高度塌陷与外边距重叠
可以通过给浮动元素设置::after伪元素来防止高度塌陷
通过给子元素设置::before伪元素来防止外边距重叠.box1::after{ content:""; display:block; clear:both; }
也可以同时设置来解决高度塌陷与外边距重叠.inner::before{ content:""; display:table; }
.clearfix::before, .clearfix::after{ content:""; display:table; clear:both; }