网页布局的方法：标准流、浮动、定位、（flex布局）、（响应式布局）

1.标准流<浮动<定位

2.受浮动影响的情况及其解决方法

案例情况：如果上一个父盒子中有多个子元素浮动了，而且父盒子又没有高度，或者高度不够其中的多个子元素的高度，那么下面的父盒子（上下父盒子是兄弟关系）的布局会受到影响。

 

解决方法：清除浮动（五种方法）：

方法①（加高法）：

给上面一个父盒子一个合适的高度height：n px。（缺点：有时候盒子不能加高，靠内容撑起高度）

 

方法② （额外标签法）：

在上面一个父盒子里面内容的最后加一个块级元素，然后给添加的块级元素设置clear：both；来清楚左右两边的浮动影响。（缺点：添加额外标签，HTML结构太乱）

 

方法③（ 单伪元素清除法）：

操作：用伪元素替代额外标签。在css添加下面代码（一般项目经理准备好的）。然后在需要清楚浮动的标签（上一个父盒子）添加class：“clearfix”类即可。（优点：方便）

基本写法：
.clearfix::after {
content:"";
display:block;
clear:both;
}

补充写法：
.clearfix::after {
content:"";
display:block;
clear:both;
//补充代码，隐藏额外标签
height：0；
visibility:hiddent;
}

 

方法④（ 双伪伪元素清除法）：类似方法三，只是css代码不同。（此时clearfix这个类还可以用在解决外边距塌陷问题，说明如图） 优点：一举两得！！

 

 

 

方法⑤：给父元素（上一个盒子）设置overflow：hidden；（优点：最简单）

 

——————————————————完！