Css 清除浮动的几种方法

Css清除浮动的几种方法

1. 为什么添加浮动
2. 为什么清除浮动
3. 清除浮动
- 1) 额外标签法
- 2) 利用 Css 的 overflow;
- 3) after伪元素清除浮动
- 4）after、before 双伪元素清除浮动
- 5）让父元素变成行内块元素
- 6）给父元素设置高度

1. 为什么添加浮动

在 html 中的元素分为: 块级元素、行内元素，行内块元素、行内元素，html 中的块级元素都是单独一行显示的，有的时候我们需要它们并列一行显示就需要浮动
添加浮动的块级元素会自动转化成行内块元素

2. 为什么清除浮动

因为浮动脱离了文档流，会浮在下面未浮动的盒子上方，影响整体的布局

3. 清除浮动

1) 额外标签法

在浮动元素的下方添加一个空的块级元素并在 Css 中添加 clear 样式
clear 的元素只能通过调整自身来使自己不要和浮动元素排列在一起

 .clear {/* both清除左右两侧浮动 *//* left   左 *//* right    右 */clear: both; }

缺点： 需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

2) 利用 Css 的 overflow;

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要添加 *zoom: 1; 触发 hasLayout

在添加overflow属性后，浮动元素又回到了文档流，把父元素高度撑起，达到了清除浮动的效果。

 .father {overflow: hidden;*zoom: 1;}

缺点：
overflow: auto 文本超过本身的宽度或高度会有额外的滚动条
overflow:hidden 会溢出隐藏
注意: 是给父元素添加改样式

3) after伪元素清除浮动

 .clearfix:after {content: "";display: block;height: 0;visibility: hidden; /* visibility 属性规定元素是否可见 hidden 隐藏  停职留薪   */clear: both;}.clearfix {*zoom: 1;/*ie6,7专门清除浮动的样式*/}

注意: 是给父元素添加 .clearfix 类名

4）after、before 双伪元素清除浮动

 .clearfix:before,.clearfix:after {content: "";display: table; /* （类似 <table>）此元素会作为块级表格来显示，表格前后带有换行符 */}.clearfix:after {clear: both;}.clearfix {*zoom: 1;/*ie6,7专门清除浮动的样式*/}

注意: 也是给父元素添加 .clearfix 类名

5）让父元素变成行内块元素

     .father {display: inline-block;vertical-align: middle;  /* 设置元素的垂直对齐方式 */}

如果不添加 vertical-align 两个盒子上下之间会有个小缝隙

缺点： vertical-align 会影响里面文字和图片的对齐方式

6）给父元素设置高度

其实，以上的几种方法（额外标签法除外）最后都是让子元素撑起父元素从而给父元素一个高度，只不过，在实际开发中自己测量高度，而且不利于更新和维护，而且有些盒子高度不固定，不建议直接设高度

如果还有什么其他方法大家可以推荐一下，如果大家觉得文章那个的地方有问题的话请大家多多指教，让你我共同进步一起成长