css面试精讲之防止高度坍塌的4种方式

372 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第4天,点击查看活动详情

Q1:BFC专题

1、防止高度坍塌的4种方案

问题重现

问题重现1:

  • 父元素的高度,都是由内部未浮动子元素的高度撑起的。

image.png

问题重现2:

  • 子元素浮动,还会对付元素造成影响。
  • 如果子元素浮动起来,就不占用普通文档流的位置。父元素高度会失去支撑,就造成高度坍塌。

image.png

问题重现3: image.png 问题重现4:即使有部分元素留在普通文档流布局中支撑着父元素,如果浮动起来的元素高度高于留下的元素。那么浮动元素的高度会超出父元素边框,用户体验同样不好!

image.png

解决方案

1.为父元素纸质overflow:hidden属性

原理: CSS中的overflow :hidden属性会强制要求父元素必须包裹住所有内部浮动的元素,以及所有元素的margin范围。

image.png

缺点:如果刚好父元素有些超范围的子元素内容需要显示(比如,个别position定位的子菜单项),不想隐藏,就会发生冲突

image.png

2.在父元素内的结尾追加一个空子元素(块级元素),并设置空子元素清除浮动影响(clear:both)

原理: 利用clear:both属性和父元素必须包含非浮动的元素两个原理

image.png

3.设置父元素也浮动

原理: 浮动属性也会强制父元素扩大到包含所有浮动的内部元素。 image.png

4.为父元素末尾伪元素设置clear:both

优点:既不会影响显示隐藏,又不会影响查找元素,又不会产生新的浮动问题 父元素::after{ content:""; display:table; clear:both; height:0 }

image.png