清除浮动的方法

清除浮动介绍”
含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级元素

原因：子元素浮动后脱标———》不占位置

1. 需要父元素有高度，从而不影响其他网页元素的布局
   清除浮动：
   缺点：父元素设置高度(不推荐)；原因是因为新闻类或者电商类的内容巨长，几乎划不到底目的是显示更多的内容。这个时候就不太适合给父元素加高度，加了高度就限制了内容的放进来网页。

2. 清除浮动——额外标签法
   操作：
   在父元素内容的最后一个添加块级元素；给添加的块级元素设置clear：both。both是两者的意思，就是左右浮动都会清除 ，这样就可以在父元素没有设置高度的情况下，清除浮动，后面你再想添加内容的时候，就不会因为高度问题而内容不足
   缺点：会在页面中添加额外的标签，会让页面的html结构变得复杂。

清除浮动----单伪元素清除法
操作：使用伪元素代替额外标签法
.clearfix::after {
/* content必须设置 /
content: “”;
/ 伪元素为行内元素，所以需要设置diaplay：block */
display: block;
clear: both;
}

优点：项目中使用，css添加，减少div使用。

清除浮动----双伪元素清除法（推荐使用）
.clearfix::before的作用是：解决外边距塌陷问题。
外边距塌陷！：父子级标签，都是块级元素，子级加上margin会影响父级的位置。

.clearfix::before,
.clearfix::after{
content:";
display:table;
}
.clearfix{
clear:both;

overflow：hidden（溢出隐藏法）
直接给父元素设置overflow：hidden
优点：方便快捷。