关于前端学习的思考-浮动元素和块级元素的关系

先摆关系：浮动元素嵌套块级元素，浮动元素和块级元素是上下关系。

1、浮动元素为父盒子，块级元素为子盒子。

父盒子为浮动元素，子盒子不会继承。如图float=none；

摆结论：子盒子为行内元素，行内块元素和块级元素，子盒子都会随着父盒子移动。

2、块级元素为父盒子，浮动元素为子盒子。

同理，又如上述两张图片，父标子浮的情况下，父盒子也会带着子盒子移动。

综上所述，父盒子会带着子盒子移动，浮动元素只会使得高度塌陷，例如子盒子为浮动元素，父盒子不会撑满，只有清除浮动，才能保留子盒子的高度，重新撑满父盒子。

清除浮动的两种方法

父级元素使用：：after

浮动元素下方写一个div，并清除浮动。

3、浮动元素在上，块级元素在下。

如果浮动元素里面有图片和文字，会形成文字，图片环绕效果，先右弹，后左弹。

4、块级元素在上，浮动元素在下。

浮动元素不会影响前面的块级元素。