前端css基础浮动知识点总结

一、什么是浮动

添加浮动的元素会向左或向右排列，直到碰到左右边界或另一个浮动框的边框为止，同时会影响周围的元素。

• 浮动基础语法
  float: left //向右浮动
float: right //向左浮动

二、浮动的作用

1. 早期作用
   图文环绕

2. 现在作用

    网页布局，让垂直布局的盒子变成水平布局

三、浮动的特点

1. 元素添加浮动后会脱标，在标准流中不占位置。
2. 浮动的元素层级要比标准流的层级高出半个级别，可以覆盖标准流的元素。
3. 浮动找浮动，下一个浮动的元素会在上一个浮动元素的后面进行左右浮动。
4. 浮动会受到上面元素边界的影响。
5. 浮动的元素拥有特殊的显示效果；

• [一行可以显示多个]
• [ 可以设置宽高]

6. 注意点：浮动的元素不能通过text-align:center或者margin:0 auto，让浮动的元素水平居中。

四、浮动的副作用，及其解决方法

1.浮动的副作用

• 如果子元素浮动了，此时子元素就不能撑开标准流的父元素，从而导致父元素塌陷。

添加浮动前 添加浮动后

2.解决方法

• 清除浮动 方法一：直接给父元素设置宽高。(简单粗暴，但部分场景不适用，如：能拥有刷新功能的推荐模块)

方法二：额外标签法。

1. 即在父元素最后添加一个块级元素

2. 给需要添加的块级元素设置去除浮动的核心代码：clear:both

3. 缺点：在页面中添加额外的标签，会让html结构变得复杂。 方法三：单伪元素清楚法。

4. 用单伪元素清除法

• 代码

.clearfix::after {
content: '';  //必填属性
display: block;  //转换成块级元素
clear: both;   //清除浮动核心代码
}

• 补充代码(隐藏伪元素) height:0;
visibility：hidden //元素隐藏

方法四: 双伪元素清除法

• 代码

.clearfix::before,

.clearfix::after {

    content: "";

    display: table;
}

.clearfix::after {

    clear: both;
}

方法五: 给父元素设置一个overflo:hidden