一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第4天,点击查看活动详情。
Q1:BFC专题
1、防止高度坍塌的4种方案
问题重现
问题重现1:
- 父元素的高度,都是由内部未浮动子元素的高度撑起的。
问题重现2:
- 子元素浮动,还会对付元素造成影响。
- 如果子元素浮动起来,就不占用普通文档流的位置。父元素高度会失去支撑,就造成高度坍塌。
问题重现3: 问题重现4:即使有部分元素留在普通文档流布局中支撑着父元素,如果浮动起来的元素高度高于留下的元素。那么浮动元素的高度会超出父元素边框,用户体验同样不好!
解决方案
1.为父元素纸质overflow:hidden属性
原理: CSS中的overflow :hidden属性会强制要求父元素必须包裹住所有内部浮动的元素,以及所有元素的margin范围。
缺点:如果刚好父元素有些超范围的子元素内容需要显示(比如,个别position定位的子菜单项),不想隐藏,就会发生冲突
2.在父元素内的结尾追加一个空子元素(块级元素),并设置空子元素清除浮动影响(clear:both)
原理: 利用clear:both属性和父元素必须包含非浮动的元素两个原理
3.设置父元素也浮动
原理: 浮动属性也会强制父元素扩大到包含所有浮动的内部元素。
4.为父元素末尾伪元素设置clear:both
优点:既不会影响显示隐藏,又不会影响查找元素,又不会产生新的浮动问题 父元素::after{ content:""; display:table; clear:both; height:0 }