浮动的概念:
1️⃣ 使用场景,用于页面布局,特别是与块元素之间的横向布局
2️⃣ 浮动的特征 :
a,提升元素层次(元素脱离文档流)
b,行元素设置浮动,会支持宽度的设置,支持上下 padding ,上下 margin 设置
c,块元素设置浮动,左右auto失效
d,块元素设置浮动,不设置宽高时,元素大小也是由内容撑开(不再独占一行)
清浮动 : 清除浮动所产生的影响
清除浮动几种方法 :
1️⃣ 给父元素设置高度(拓展性不好)
2️⃣ 让父级也浮动 (不太常用) float: left;
3️⃣ 父级设置 display:inline-block;属性 但是, IE 6不支持属性
4️⃣ 利用换行标签清除浮动违背了标签和样式相分离的原则 <br clear="all"/>
5️⃣ 利用空标签清浮动但是IE 6下空标签也会有默认的行高(19像素) <div class="clearDiv"></div>
6️⃣ 父级设置over:hidden; 属性 IE 6 中需要结合 zoom 属性才会起作用 overflow: hidden
7️⃣ 使用伪元素清浮动 IE 6中也存在兼容性问题