css浮动原理和清除浮动的方法

一、浮动

原理：

• 元素浮动后遇到父元素的边框或者其他浮动元素就会停止浮动，浮动不会重叠
• 浮动脱离文档流，不占据位置，只有左右浮动，没有上下浮动。
• 利用浮动可以让块级元素并排显示

二、浮动设置

• float：left
• float：right

三、（重点）清除浮动

1、受影响的元素

clear：both——清除所有浮动效果
clear：left——清除左边浮动效果
clear：right——清除右边所有浮动效果

2、浮动元素的父元素

over-flow:hidden/auto
//找到最高的子元素高作为自己的高

3、浮动元素兄弟元素

在浮动元素的最后面放一个空的div
div样式设置clear：both

4、伪对象法

在浮动元素的父元素上设置

:after{
    content:"";
    display:block;
    clear:both
}
// 相当于空div法

5、父元素高度

给浮动元素的父元素给高度，一般不推荐