CSS-清除浮动带来的影响-父级边框塌陷问题

清除浮动带来的影响-父级边框塌陷问题

1.清除浮动的本质?

就是清除浮动元素脱离标准流造成的影响.

2.q清除浮动的策略是?

闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

1.额外标签法：（实际工作可能会遇到，但是不常用）

额外标签法也称为隔墙法，是W3C推荐的做法。

额外标签法会在浮动元素末尾添加一个空的标签。例如<div style="clear:both"></div>,或者其他标签（如<br/>等）
- 优点：通俗易懂，书写方便
- 缺点：添加许多毫无意义的标签，结构化比较差
注意问题：这个新增元素要求必须是块级元素，不能是行内元素

2.父级元素增加overflow

可以给父级元素添加overflow属性，将其属性值设置为hidden、auto、scroll

- 优点: 代码简洁
- 缺点: 无法显示溢出部分
注意是给父级元素添加代码

3.:after伪元素法

:after方式是额外标签法的升级版。也是给父元素添加

.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
// 兼容ie6 7 专有的写法 意思就是ie67的时候可以用它来清除浮动
*zoom:1;
}
- 优点：没有增加标签，结构更简单
- 缺点：照顾低版本浏览器
代表网站：百度、淘宝、网易等

4.双伪元素清除浮动

也是给父元素添加

.clearfix:before,.clearfix:after{
content:"";
display:table; // 转换成表格
}
.clear:after{
clear:both;
}
.clearfix{
*zoom:1;
}
- 优点: 代码简洁
- 缺点：照顾低版本浏览器
代表网站：小米、腾讯等

css书写顺序