css之浮动——浮动的概念、为什么清除浮动？清除浮动的方式

目录

1 为什么浮动（float）？

2 为什么清除浮动？

3 清除浮动的几种方式

1）父级元素（包含块）定义 height

2）父级元素添加overflow属性（父元素添加overflow:hidden）

3）添加空白（没有任何内容）标签

4）after伪元素清除浮动

---

1 为什么浮动（float）？

浮动（float）最初仅仅是为了让内容环绕在浮动元素周围，后来利用它的特点逐渐将其用于布局。

浮动让布局多样化，但它会脱离正常流，造成一些副作用（如高度塌陷），如果不加以解决会直接影响整体布局。

2 为什么清除浮动？

浮动的一大缺陷是让父元素高度塌陷，也就是浮动元素不能把父元素的高度撑起来（清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题）；（附当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线）

另一大缺陷是影响兄弟元素的位置或样式。

3 清除浮动的几种方式

清除浮动本质上是说要清除浮动元素带来的一些影响（例如高度塌陷）。

1）父级元素（包含块）定义 height

原理：父级元素手动定义height，就解决了父级div无法自动获取到高度的问题。

  缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2）父级元素添加