css基础———浮动的作用及副作用

1.文档流

在浮动中有一个文档流的概念，也称标准流————元素在排列的时候有默认开始位置以及他们所占的区域

2.浮动

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

浮动的目的：为了达到自己的布局目的，让指定元素定位在指定位置，并且可以设置浮动后的行级元素的宽高，我们就需要用到浮动

3.浮动的副作用

1). 块状元素，会钻进浮动元素的下面，被浮动元素所覆盖，像这样

2）. 行内元素，例如文字， 则会环绕在浮动元素的周围，为浮动元素留出空间，像这样：

3）. 浮动元素的父元素坍缩, 像这样：

如果我们不希望要这些效果，就需要清除浮动来解决后患，使后面的元素表现的跟浮动前一样，这样

我们既实现了黄色元素浮动，又实现了后来的元素不会受其影响产生不必要的麻烦。