父元素浮动子元素会浮动吗_千峰逆战班打卡day-01浮动

首先我们要认识浮动，浮动的目的，它起到了什么关键性作用，下面我将对浮动的理解进行分享！ 在css中，我们通过float属性实现浮动

• float(浮动)的属性:

float:left 【左浮动】

right 【右浮动】

none 【取消浮动】

浮动的目的是什么

• 简单来说就是让竖着的元素横着来
• 前提必须是块级元素，我们都知道块级元素在默认情况下都是独占一行的(不知道的童鞋要被老师打屁股了啊)

浮动案例实战，源码及效果图看下边

• 未添加浮动的案例

HTML

CSS

网页效果

为了让大家可以清楚的看到添加浮动的效果，下面我要给三个小的div套上一个大的div,并设置宽高和一个黑色边框

1、添加左浮动的案例

HTML

CSS

网页效果

2、添加右浮动的案例

HTML

CSS

网页效果

3、取消浮动(float：none;)

"取消浮动"的意思说白了就是恢复原状，继续应用块级元素本身的特质，独占一行

下面来说一些因操作不当产生的浮动问题

1、当父级元素的宽度小于浮动子元素的总宽度，子元素将被迫换行

HTML

CSS(减小父元素box的宽度)

网页效果（大div的宽度不足以支撑三个小div的宽度，所以将被迫换行）

2、高度塌陷，造成重叠效果

HTML

CSS（只给一个子集添加浮动，其它的浮动被注释，效果如下）

网页效果（只给一号盒子添加浮动，2号盒子将与1号盒子进行重叠）

3、图文混排(既有图片又有文字的情况)

HTML

CSS

网页效果(进行浮动的盒子，周围的文字将对它产生环绕的效果)

浮动总结：

1、左浮动找左边，右浮动找右边

2、浮动只影响后面的元素，不影响前面的元素

3、父级元素的宽度小于浮动子元素的总宽度，子元素将被迫换行

4、子元素高度不一致的浮动元素被迫换行时可能被卡住

5、结构先写的先浮动，后写的后浮动

6、图文混排

7、浮动产生的问题,父级元素高度坍塌

解决办法：给父元素添加高度