解决高度坍塌的方案

1. 父级元素自定义高度

当父级中子元素浮动，子元素就脱离文档流了，从而就不能支持父级元素 父元素可以参照子元素自定义一个合适的高度

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

2. BFC保护

任何设置了BFC的元素，和浮动的元素相遇时，都可以实现"自动填充"的适应布局。 简单来说：父级元素设置了BFC结界后，子元素浮动，父元素高度会自动填充(自动适配)，解决父级高度坍塌

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

3. clear属性清除浮动影响

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

劣势：可以使用父元素中最后一个子元素，牺牲自我(宽高都是0)，清除前面浮动元素带来的高度坍塌影响，但会造成后台遍历数据多一个孩子

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

让父元素也通过float浮动脱离文档流，这时父级与子级就成为了同层元素 父元素脱离文档流还会产生问题，可能会影响到父元素的父元素，导致上层元素依然需要处理高度坍塌的问题 浮动的属性不会继承，此处方式尽量少用，因为会出现连带反应，还得解决父级的父级

5. 使用伪元素解决高度坍塌

/* 给浮动元素li的父级的最后生成一个空白子元素，变块级，清影响 */ .clearfix::after { content: ''; /* 在父元素体内的最后生成一个新的空白子元素 */ display: block; /* 只有块级元素才能使用clear属性 */ clear: both; /* 清除前面所有哥哥们朝两个方向浮动带来的影响 */ } 使用父元素的::after 模拟一个假孩子，并且::after生成的伪元素刚好在父元素内部的最末尾，方便清除前面哥哥们浮动对父元素造成的高度坍塌影响 注意！！！这个假孩子要变块级并且使用clear:both;