CSS中清除浮动的作用以及如何清除浮动

1.什么是浮动，浮动的作用
“浮动”从字面上来理解就是“悬浮移动、非固定”的意思。块级元素（div、table、span…）是以垂直方向排列，而在前端界面中往往要使用水平布局块级元素使界面更美观。这就要用到浮动了。被设置浮动的元素会脱离标准流（竖直排列），从而达到水平排列的效果。
例如.
未设置浮动时图1中的两张图片竖直排列在父级元素（橙色区域）中。
图1

给承载图片的元素设置浮动后，如下图2显示

图2
注：图1未设置父级元素高度。图2设置了父级元素的高度。

2.为什么要清除浮动

未设置浮动时显示图1效果。
当父级元素设置的高度小于子级元素（子级浮动）的高度时会出现如下图3显示结果。此时设置了浮动的子元素已经脱离了标准流，换句话说就是子元素浮动在父级元素之上了。

如果在块级元素（橙色）下方添加一个兄弟块级，两个浮动的图片也会浮动在它父级元素的兄弟元素上方。

如果父级元素只加宽度不加高度，则父级元素不会显示（橙色区），随后设置的兄弟元素会替代前一个元素。
我们想要达到的目的是子元素在父级元素内浮动并且父级元素在未设置高度的时候能够显示。所以就要清楚浮动了。

3.如何清除浮动
方法一，给浮动元素添加一个兄弟元素，兄弟元素的CSS设置clear:both;。
方法二，给浮动元素的父级元素的CSS添加overflow: auto; zoom: 1; //zoom: 1; 触发IE hasLayout。
方法三，
.outer {zoom:1;} .outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibili ty:hidden;}

关注公众号回复“资料”即可获得精心为您准备的前端学习视频资料