浮动和浮动清除的那点事

浮动是什么

首先我们来引入MDN对浮动的描述

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

原文中提到了该元素从网页的正常流动中移除，这里其实就是指的脱离文档流，元素应沿其容器的左侧或右侧放置其实就是指脱离文档流之后，元素一直像最左边或者右边靠拢，直至碰到父元素或者另一个浮动元素。

浮动能解决什么问题

浮动能实现文字包裹效果，经常见到报纸或者杂志的排版，一张图片被一段文本包裹，而如果代码这样写

<div id="example-element" class="transition-all" style="float: none;">Float me</div>
<span>As much mud in the streets as if the ....</span>

实际上出来的效果是这样的

但是我们为第一个设置为浮动之后，就能达到我们想要的效果

有时候实现li标签同行显示也会用到浮动

浮动会导致什么问题

父元素高度塌陷因为子元素浮动脱离了文档流，父容器计算高度的时候不会计算浮动的子元素，所以会出现父元素高度塌陷的问题

如何避免这些问题

BFC：之前的文章有写过BFC在计算高度的时候会计算浮动元素的高度，那就好说了，只要将父元素设置为BFC就行了

clear：使用clear属性

clear属性的定义

MDN官网的定义

clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。

意思就是 clear为left就是当前元素必须在其左侧的元素下方显示
即

既然如此就有人提出了叫做clearfix的解决方案，专门用来清楚浮动，若父元素高度塌陷了，那么我在父元素的尾部插入一个伪元素，并且设置clear为both，意思是这个元素必须在其左右侧的浮动元素下方显示，这是之后就把父元素撑开了，高度塌陷的问题就解决了

 .warpper::after{
     content: "",
     display: block,
     clear: both
 }