带你了解CSS浮动的魅力

        

目录

            

一、什么是浮动？

二、浮动产生的影响（问题）

  三、清除浮动--解决浮动带来的问题

1、后续标准流被覆盖

​解决方案：给box2 添加如下代码：

2、父级盒子高度塌陷问题

解决方法

 3、垂直外边距重合

     解决方法如下：

总结

---

   

今天给大家分享浮动会带来的一些都会遇到的问题。

一、什么是浮动？

1、含义：浮动属性是float用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

2、作用：浮动可以改变元素标签默认的排列方式，可以让多个块级标签一行内排列显示。可以利用浮动完成标准流没办法完成的布局效果。

3、浮动的特点

1.元素一旦浮动，脱离文档流(不占页面空间，后面未浮动元素会上前补位)

2.浮动元素会在当前行，停靠在父元素的左/右边，或者停靠在其他已浮动元素的边缘

3.当父元素横向显示不下所有浮动元素时，最后显示不下的，会自动换行

4.浮动用于解决，多个块级元素在同一行显示的问题

二、浮动产生的影响（问题）

（1）由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素；若没有给父元素设置高度，那么父元素就不会在显示屏上显示。

（2）与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置

（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示

  三、清除浮动--解决浮动带来的问题

1、后续标准流被覆盖

     由于元素浮动之后，会脱离文档流，不占位置，会让后续不浮动的元素上前补位.浮动的元素就会遮盖住后续标准流。

如果后续元素不想上前补位，需要对此元素设置清除浮动 clear:

取值：1.left  清除左浮动对我的影响

      2.right 清除右浮动对我的影响

      3.both 清除左右浮动对我的影响

      4.none 不清除影响

给box1添加浮动后࿰