前端入门学习笔记（三）之CSS的float浮动

一、基础介绍

float中有四个基本参数，左浮动，右浮动，不浮动，继承浮动。利用float可以实现文字环绕图片，但是会导致父元素塌陷问题，但是清除浮动副作用有四种解决方法

二、float属性介绍

1.float基本参数

float 的四个参数

• float:left
• float:right
• float:none;
• float:inherit

2.float文字环绕图片

给图片设置左浮动，能让文字环绕图片

• 如果一个元素没有内容，但是样式中设置宽和高和背景颜色，此时页面中不显示，但是设置浮动效果会显示样式中设置的样子。

3.float原因及副作用分析

在父元素里面设置子元素，若所有子元素都设置了float，则父元素塌陷，因为设置了浮动的子元素会让子元素脱离原有的方式进行布局

4.父元素塌陷问题的四种解决方法

（1）给父元素设置CSS样式时添加高度（不是auto）
（2）通过clear清除内部和外部浮动

• 前提条件：一个父元素，两个子元素一个设置了浮动一个没有，此时可以给没有设置float 的子元素设置clear，设置了之后就不会重合，对它来说另一个子元素也算空间。

（3）给父元素添加overflow属性并结合zoom:1使用
添加overflow:hidden则不会溢出，会截掉多于的。zoom:1是把父元素的高度包括子元素的。但是我把zoom:1删除了，并没有什么影响？？？？？？？？？？？

（4）给父元素添加浮动

• 厉害就用这个

三、实际应用