高度塌陷 万能清浮动

高度塌陷 万能清浮动

子元素设置浮动，父元素没有写高度；父元素高度塌陷
解决方式

● 第一种：给父元素设置overflow:hidden;
● 第二种：在浮动元素后面添加一个空div (是后面，不是里面)；然后给这个空div设置{clear:both;height:0;}
● 第三种: 万能清浮动

高度塌陷的元素::after{

content:"";

display:block;

height:0;

clear:both;

overflow:hidden;

visibility:hidden;
    }

相关 知识点

清除浮动clear

给哪一个元素设置 就是让清除这个元素左边/右边的浮动元素;那么白话来说 是怎么清除的呢 就是让这个元素折行 不和浮动元素在一行
clear:left/right/both
左浮动时 clear:left有效
右浮动时 clear：right有效
懒得分左右 直接写clear:both
只能设置给块状元素 给行内元素无效
clear有预置空间 元素设置clear 就不会和其他浮动元素在一行 会折行 此时 margin-top不大好用