HTML CSS 清除浮动

浮动：
float: left | right

使用浮动属性的元素不占用原来的位置，脱离了标准文档流。可以让块级元素在一行显示，顶部对齐。

应用场景包括文档中图片文字环绕、导航栏等布局。

但是由于浮动脱离了标准文档流，使用不当浮动会造成页面布局的混乱，所以要清除浮动。

清除浮动是指清除浮动带来的影响而不是清除浮动的效果。

造成混乱的原因：子元素设置浮动，父元素没有设置宽高，导致父元素塌陷，后续标准文档流的内容叠加在浮动元素的下边。

将div2的两个子元素设置为float：left，并且div2不设置宽高。

标准
文档流div1div21
div22
div3
div4

发现div2的两个字元素脱离了文档流，没有将父元素div2撑起，导致div2塌陷，标准文档流中的后续元素取代div2的位置，显示在div2两个子元素的下一层。


div21
div22


标准
文档流div1div3
div4

清理浮动的种方法：

1.使用clear:left|  right  | both

          clear:both;

   在要清除浮动的元素后面添加一个标签。

   在标准文档流中添加了一个空白的盒子。

2.给父盒子设置overflow:hidden

   如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动。影响其他CSS效果。

3.使用伪元素清除浮动（推荐）

  :after