HTML5第六天学习内容(浮动 / 清浮动 / 文本环绕)

浮动的概念:

            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中也存在兼容性问题