解决高度坍塌

高度坍塌产生的原因

当父元素中所有的子元素都浮动走，也就是所有的子元素都脱离文档流，释放布局空间后     就不再支持父级元素了，父级元素就会高度坍塌——失高

1.     父级元素自定义高度

父元素可以通过参照子元素的高度给自己自设高度解决问题

应用场景：     已知子元素的高度，并且子元素高度相同时，适合此方案，比如:导航条     注意:当子元素高度未知时，无法自定义父级高度

2.     BFC保护

任何设置了BFC的元素，和浮动的元素相遇时，都可以实现”自动填充”的适应布局。     也就是说，当父元素设置了BFC结界后，子元素浮动，父元素高度会自动填充(自动适配)

应用场景:     子元素未知高度，且子元素不会超出父级范围     触发BFC的代码:overflow:hidden/scroll/auto;

3.     父级元素成为同层元素

父级想要和子元素成为同一层元素，相当于父元素也要脱离文档流     父元素脱离文档流，可能会继续影响父元素的上级元素，导致上级元素仍然需要解决高度坍塌的问题

4.     clear属性清除浮动影响

clear属性专门用于解决float带来的高度坍塌问题     1.      清除指的是清除前面”哥哥们”浮动对父元素产生的不支撑效果     2.      clear会让前面的浮动元素与当前元素换行显示，对后面的浮动元素无法起到作用     3.      使用clear的元素，自己不可以浮动，要保持在文档流中替前面的浮动元素清除影响     4.      clear属性只对块级元素生效

使用方法:在父元素最后，添加一个牺牲自我(宽高都是0)的子元素，清除浮动影响     这样的方式会造成后台遍历数据时多一个孩子

5.     使用：：after伪元素

给父元素最后生成一个空白的”假孩子”，变块级，清影响     .clearfix::after {      content:'';  /* 内容是空白的 */     display:  block; /* 变成块级才能用clear属性 */     clear:  both; /* 用于清除前面所有哥哥们浮动造成的失高影响 */ }

我们使用::after模拟出一个假孩子，这个子元素在父元素的最后，方便只用它来清除高度坍塌影响