浮动特点
浮动：脱离标准流的控制
1 顶对齐
2 行内块
3 脱标
浮动布局
浮动：父宽度不够时，子元素换行排布
解决：去掉第4个、第8个 li 的右边距
li:nth-child(4n){margin-right: 0;}
清除浮动
1 块级标签：在父元素内容最后加一个块级元素 .clearfix ，设置 clear:both
2 单伪元素：给父元素内容添加一个块级伪元素 .clearfix::after ， 设置 clear: both;
.clearfix::after {
content:"";
display: block;
clear: both;
}
3 双伪元素：给父元素内容添加块级伪元素 .clearfix::before, .clearfix::after ， 设置 display: table; clear: both;
.clearfix::before, .clearfix::after {
content:"";
display: table;
}
.clearfix::after {
clear: both;
}
::bofore 解决外边距塌陷问题
::after 清除浮动影响
4 隐藏溢出：父元素设置 overflow:hidden
浮动布局
浮动：父级没有高度时，排布出现问题
原因：子级脱标后，不能撑开父级高度