css清除浮动的方法总结

一、浮动的定义

使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

ps: 文档流是文档中默认的摆放位置。

• float语法：
  • float: none; 不使用浮动
  • float: left; 靠左浮动
  • float: right; 靠右浮动

二、浮动的用途

• 可以使文字围绕图片
• 可以水平排列布局

三、浮动用法

• 浮动的副作用

  
  
  浮动元素脱离普通流，使包含它的无高度样式的父容器告知不到其存在而发生内容无法撑开的现象

• 解决方法

1. 直接给父容器设置高度样式（简单粗暴）
   缺点：只能适用于父容器高度固定的情况下，很少用。

   
   
   直接在父容器设置固定高度

2. 因为浮动元素可以感知到浮动元素的存在，所以直接给父容器设置浮动样式，使父容器感知到里面的浮动元素，就会自动撑开。
   缺点：给父容器设置浮动样式后，父容器可能会发生高度塌陷问题。

   
   
   直接在父容器设置浮动，自动撑开

3. 对父容器设置overflow: hidden/auto;触发其BFC
   缺点：设置hidden会导致超出部分直接被隐藏，且不占据文档流位置，而设置auto的话超出部分会出现一个滚动条，影响视觉效果。

overflow: hidden;

overflow: auto;

4. 在父级样式添加伪元素 :after(推荐)
   缺点：css代码量增多

   
   
   伪元素清除浮动

PS: 必须在after伪元素，且该伪元素必须为block元素，原因是after伪元素在其父容器的其他标签的最后添加一个元素，渲染顺序排在了其父容器内部的最后，然后设置了block元素是为了不让其它元素与其一排，再对其设置清除浮动，父容器自然就被这个after伪元素撑开了高度。

5. 使用块级标签撑开高度，和伪元素很类似
   缺点：增加了无意义的标签

   
   
   块级标签撑开高度

参考：
https://www.jianshu.com/p/89ced81bf0f1