1，浮动语法 float:left/right; 2，浮动float的目的： 实现文字环绕效果 3，清除浮动的原因： 父级塌陷，---在父级没有设置高度的情况下，父级内的元素在浮动之后会脱离文档流。 4， 清除浮动的方法 - 4-1，**空块级标签添加clear: both;属性** 在浮动元素后面添加一个块级元素，并使这个块级元素有 clear: both;属性 - **4-2. 父级添加overflow: hidden；** **原理是触发父元素BFC** 先找到浮动盒子的父元素，给父元素添加一个属性：overflow:hidden，就会清除子元素对页面的影响 ``` <div class="Parent" style="overflow:hidden">//auto 也可以 <div class="Float"></div> </div> ``` - 4-3，**给父级元素添加伪类after（推荐使用）** 同时使用clear: both;，只是变相的使用了伪类after，页面结构简洁，无需额外的标签，浏览器兼容性好 ```javascript .cc:after { content: ''; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; } ``` - 4-4 **给父级添加双伪类** ```javascript .cc:after, .cc:before { content: ""; display: block; clear: both; } ``` - 4-5 **给父级设置宽高（不推荐使用）** # img图片⾃带边距 1, 转化成（⾏级）块元素,将img块状化 ul li img{display:block;} 2, 浮动 浮动后的元素默认可以转化为块元素（可以随意设置宽⾼属性） ul li img{float:left;} 3, 给 img 定义 vertical-align（消除底部边距） ==推荐== img{ border: 0; vertical-align:top|bottom|text-top|text-bottom; } 4, 将其⽗容器的font-size 设为 0； 5， 给⽗标签设置与图片相同的⾼度