css基础-清除浮动方法总结

清除浮动方法总结

浮动：

1、浮动的属性

float:left(左浮动)

float:right(右浮动)

float:none(不浮动)

2、浮动元素的特点

1）浮动的框可以向左向右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘处为止

2）脱离文档流，会导致父元素高度塌陷，覆盖其他兄弟元素

一.  清除浮动（清浮动不是清盒子本身的浮动，而是清除其他元素浮动对他本身的影响）

               i.         清除左浮动clear:left

              ii.         清除右浮动clear:right

             iii.         清除左右两边浮动clear：both

二.  为什么要清除浮动?

a)    浮动元素脱离正常文档流,导致父元素高度塌陷0.

b)    浮动元素会对其周围元素产生影响。

c)    清除浮动,清除左右浮动对它周围元素的影响

三.清除浮动的方法总结

a)    给父元素设置overflow:hidden或者overflow:auto等属性。

b)    给父元素设置display: inline-block、table-cell、table-caption、table等属性。

  /* 让父元素拥有表格的属性,由内容撑宽 */

            /* display:table;  */

            /* 让父元素拥有表格单元格的属性，根据table自动分配它的宽度*/

            /*display:table-cell; */

/* 由内容撑宽撑高 */

            display:inline-block;

            /* 唯一具有表格语义化的标签，表格的标题,会使浮动的元素不浮动 */

            /* display:table-caption; */

c)    给父元素设置左右浮动：float:left/right。

d)    给父元素设置绝对定位或者固定定位,position:absolute/fixed。

e)    在父元素底部添加一个带有clear:both属性的额外块级元素。

f)     给父元素设置高度。（写网页过程中，没有要求一般不给父元素设置高度，由内容撑高)

g)    使用伪类（最优的一种方法）：

          i.        针对其他浏览器：.clearfix:after{content: ""; display: block; height: 0; clear:both; visibility: hidden; }

          ii.        针对IE浏览器：.clearfix:after{zoom:1; }